RECURSOS CSS

• 6 herramientas para CSS3 que tenés que tener
• Simular la realidad con efectos CSS3
• Haciendo posters muy realistas sólo con CSS3
• 47 Tips & Trucos CSS para elevar el nivel de tu sitio web
• Gran Lista de Herramientas HTML5 y CSS3 que tenés que agendar

RECURSOS JQUERY

• GUIA JQUERY (Parte 1): How To Get Started
• GUIA JQUERY (Parte 2): Selectores, Animaciones y AJAX
• Super-Sencillos pero impresionantes efectos animados con jQuery
• Removiendo, Reemplazando y Moviendo Elementos en jQuery
• Manipulando Atributos de Elementos con jQuery
• Usando Selectores en jQuery para encontrar elementos de una página
• Confusiones comunes al usar jQuery
• 30 Plugins de jQuery para darle nueva funcionalidad a tablas de datos
• 30 Plugins de jQuery para lavarle la cara a tu sitio web
• Las 10 mejores bibliotecas para dibujar online usando Canvas
• 33 tutoriales jQuery para crear Menúes de Navegación
• Show: 30 Plugins de jQuery para manejar Calendarios
• 22 excelentes tutoriales de jQuery y CSS
• 41 plugins de jQuery que realmente te van a servir

WORDPRESS

• 20+ Temas de WordPress 3.0 soportando la nueva función de Menúes Personalizables
• 30+ Plugins de WordPress para crear Galerías y Slideshows
• 40+ Excelentes Temas Premium Gratuitos para WordPress
• Usando Custom Post Types de WordPress 3.0 para crear un portfolio muy profesional
• Mostrando la cantidad de Retweets en WordPress sin usar un Plugin
• Guia MUST: Nuevas funciones de WordPress 3.0 cada desarrollador debería conocer

TIPOGRAFIAS

• 35 Tipografías muy legibles para diseños profesionales
• MEGA COMPILADO CON MAS DE 100.000 FUENTES GRATUITAS
• Fuentes Aterradoras para Diseños que den Miedo
• 21 lindas fuentes para tu próximo sitio web
• 6 útiles guías para elegir tipografías
• Nuevas tipografías gratis de alta calidad
• Otras 30 nuevas tipografías gratis de alta calidad

EJEMPLOS DE FORMAS POSITIVAS DE PRESENTAR EL ERROR 404 A LOS VISITANTES:

• Justskins.com
• Webdeveloperjuice.com
• Smashingshare.com
• Oddee.com
• Speckyboy.com
• Hongkiat.com
• Paulspoerry.com

DISEÑO

• 35 sitios web de Restaurants y Bares que tenés que ver
• 75 Portfolios con diseños oscuros
• Tenés que diseñar tablas de precios de productos? Acá van 30 ejemplos creativos
• 20 Tutoriales paso a paso para convertir PSD a XHTML/CSS y no morir en el intento

Para esas ocasiones es muy interesante tener en marcadores este sitio, DevCheatSheet, un buscador y catálogo de múltiples hojas de ayuda para diferentes aplicaciones y lenguajes. Hay info para herramientas de programación, software de diseño, editores de texto, aplicaciones móviles, y hasta ayuda para cálculos matemáticos. Muy recomendable.

Link: DevCheatSheet

En los resultados vemos como Internet Explorer 9, consigue un 100% sobre todos los tests realizados frente a los demás navegadores actuales. Según comentan estos resultados están basados en 192 tests realizados en colaboración con la W3C para evaluar el estado de los navegadores actuales. Podemos acceder a cada uno de los tests accediendo directamente desde el enlace en la sección y módulo indicado. Si estos resultados son tan reales como parecen, podríamos estar cerca de una nueva revolución en Internet.

(Click en la imagen para ver más grande)

Son los links a posts más representativos de la semana, utilísimos para diseñadores y programadores. Un MUST que como mínimo, tienen que leer para mejorar sus conocimientos:

1. Una colección de links a excelentes sitios de stock photo gratuitos: 25+ Excellent Free Stock Photo Sites for Designers
2. Necesitás un software para editar CSS? acá seguro encontrás: 14 Useful CSS Editors for Web Developers and Designers
3. 38 jQuery And CSS Drop Down Multi Level Menu Solutions
4. Trucos CSS para salvarnos las papas en distintas situaciones: 15 CSS Tricks That Must be Learned
5. 36 High-Quality Latest Free Fonts To Enhance Your Designs
6. Un verdadero MUST! 300+ Jquery, CSS, MooTools and JS navigation menus
7. 50 Useful New jQuery Techniques and Tutorial
8. Colección de formularios de contacto bastante creativos: 91 Trendy Contact And Web Forms For Creative Inspiration
9. 20 MySQL Admin and Development Tools and cheat sheets

Y para WordPress:

1. Top 160 WordPress Plugins
2. 10 Useful WordPress Loop Hacks
3. 20+ WordPress Recipes (Codes)

¿Cuál es el navegador que más incompatibilidades tiene con las nuevas novedades? Obviamente Internet Explorer.

Link: Compatibilidad de novedades en CSS3 y HTML5

Hoy nos vamos a centrar en una lista de novedades para CSS3 que sí pueden ser usadas hoy, debido a su gran compatibilidad con los navegadores:

1. TRANSPARENCIA

Ya sabías que existe la forma clásica de aplicar transparencias

.opacidad{
filter:alpha(opacity=50);/* para Internet Explorer */
-moz-opacity:0.5;        /* para Firefox, Netscape, Mozilla */
-khtml-opacity:0.5;     /* para Khtml, version anterior de Safari */
opacity:0.5;             /* para Opera, Safari, Google Chrome */
}

Ahora, con CSS3 todo esto es más sencillo y estandar, y se puede especificar un doble background para aplicar transparencia a una caja de texto. Uno nos servirá para definir el color. El otro, para aplicar la transparencia, añadiendo un nuevo valor, que puede estar entre el 0 (transparente) y 1 (opaco).

rgba(0-255,0-255,0-255,0-1)

Para distintos navegadores, se puede incluir un simple RGB o color hex en la transparencia:

.estilo {
color: rgb(235,235,235);
color: <strong>rgba</strong>(255,255,255,0.75);
background-color: rgb(153,153,153);
background-color: <strong>rgba</strong>(0,0,0,0.5);
border-color: rgb(235,235,235);
border-color: <strong>rgba</strong>(255,255,255,0.65);
}

(Este hack es válido para Safari 4, Firefox 3.0.5 en adelante y Chrome 1)

2. BORDES REDONDEADOS

Muy simple, utilizando la sintaxis compatible entre varios navegadores.

.redondeado {
border.radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

Y el HTML podría ser el siguiente

<div class="redondeado">
<a title="borde" href="#">borde</a> redondeado
</div>

3. TEXTO SOMBREADO

La propiedad text-shadow permite crear sombra sobre el texto, pudiendo variar las posiciones de esta y el color de la sombra. Es muy útil para encabezados y títulos que deseen resaltarse, pero no se debe abusar de ella porque puede saturar la vista del usuario y crear una mala estética.

Solo navegadores basados en Webkit, como Safari, Firefox 3.5+, Konqueror u Opera pueden interpretar la propiedad text-shadow. Los otros navegadores no la soportan.

Ejemplo:

h1.test {
text-shadow: #6374AB 20px -12px 2px;
}

Los parámetros que se le dan son:

El color (#6374AB), la coordenada X de la sombra relativa al texto (20 pixeles),  la coordenada Y de la sombra relativa al texto (-12 pixeles), y la dispersión u opacidad que tendrá la sombra (2 pixeles). Si aumentamos mucho el último valor, la sombra será ilegible.

4. SOMBREADO EN CAJAS DE TEXTO

Añadir sombra una caja de texto sigue el mismo formato que vimos en el punto anterior, para agregar sombra en el texto. Para esto se utiliza la propiedad Box-shadow, que es compatible con Safari 4, Firefox 3 y Chrome. Ejemplo:

.bordecaja {
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);
}

Se puede añadir múltiples sombras incluyendo múltiples valores separados por espacios:

.bordecaja {
-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75);
}

Con esto ya tendremos nuestra propia sombra en la caja de texto, sin usar ningún tipo de imágenes.

5. MULTIPLES FONDOS

Con CSS2 solo podíamos tener una imagen de fondo por cada elemento. Pero ahora con CSS3 podemos aplicar varias imágenes de fondo en un mismo elemento. Para ello debemos aplicar este código:

.variosfondos {
background: url(fondo1.gif) top left no-repeat,
url(fondo2.jpg)  top 11px no-repeat,
url(fondo3.gif) bottom left no-repeat,
url(fondo4.gif) left repeat-y;
}

Es una única propiedad background pero con una dirección por cada fondo, cada una separada por una coma. Por ahora los únicos navegadores que pueden implementar esta técnica son WebKit (Safari) y KHTML (Konqueror). Pronto estará soportada por la mayoría de navegadores.

6. ROTAR TEXTOS

Es posible ahora rotar textos en cualquier ángulo. La clave de estas rotaciones se encuentran en CSS Transformations, y tanto Firefox como Safari soportan esta ventaja:

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

Para realizar esta transformación, el elemento debe tener seteada la propiedad display: block;. Hay que añadir esta declaración al SPAN que queramos rotar. ATENCION: Internet Explorer no es compatible con este hack, por lo que deberemos hacer uso de los filtros. Se inserta en el código CSS igualmente:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Pero en el código para Internet Explorer, se inserta un valor del 0 al 3, en vez de grados:

• 0: no rotar.
• 1: rotar 90 grados
• 2: rotar 180 grados
• 3: rotar 270 grados (-90 grados).

Terminamos con un ejemplo para mostrar la fecha rotada a 90º, interesante para utilizar en blogs:

.example-date {
background-color:#123;
border:1px solid #345;
padding:45px 5px 0;
position:relative; width:60px;
}

.example-date .example-day {
font-size:45px;
left:5px;
line-height:45px;
position:absolute; top:0;
}

.example-date .example-month {
font-size:25px;
text-transform:uppercase;
}

.example-date .example-year {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display: block;
position: absolute;
right: -5px;top: 15px;
}


Y en el HTML usaremos el siguiente:

<div>

<span>31</span>

<span>July</span>

<span>2009</span>

</div>

Sin duda, son una serie de funciones nuevas que te permitirán sacar máximo provecho a tus diseños sin que debas usar imágenes para lograrlo, creando así sitios web mucho más livianos y veloces.

En Tripwire Magazine. Un mini tutorial sobre el funcionamiento de mod_rewrite en Apache: Expectually Useful Apache Rewrite Techniques Explained

En Six Revisions. Una colección de comunidades de diseñadores adonde poder mostrar tus diseños para escuchar la crítica de diversos profesionales de todo el mundo: 10 Excellent Feedback Tools for Web Designers

En Smashing Magazine. Tutoriales y técnicas de exquisita calidad para aplicar con jQuery: 50 Useful New jQuery Techniques and Tutorials

En Tripwire Magazine. Colección de cheat sheets de MySQL, para olvidadizos: 20 MySQL Admin and Development Tools and cheat sheets

Mega CSS Resource Roundup

El CSS es una de las herramientas más poderosas disponibles para diseñadores web. Con él podemos transformar completamente el look de un sitio web en cuestión de minutos, y sin ni siquiera tener que tocar el contenido del mismo. Pero por más que mucho sepamos de CSS hay un hecho interesante y es que los selectores de CSS no se están usando a pleno hoy en día y algunas veces tenemos la tendencia a inundar nuestro HTML con excesivos e innecesarios ids, classes, divs y spans.

La mejor manera de evitar esas plagas y mantener limpia la semántica, es usando selectores CSS más complejos, que puedan apuntarse a elementos específicos sin la necesidad de una clase o un id. Notaremos que haciendo esto mantendremos nuestro código y hojas de estilo aún más flexibles.

Link: Taming Advanced CSS Selectors

En el blog de AMPM: 15 artículos sobre CSS para novatos y no tanto

@font-face es una propiedad muy útil para definir en un sitio web una o más fuentes que el usuario no tenga instalada en su PC. Sólo es necesario subir la fuente a nuestro sitio web y definirla via CSS.

Para el tipo de fuente, puede usarse una en formato OpenType (.otf) o bien en formato Truetype (.ttf). Vemos un ejemplo si quisiéramos usar la tipografía gratuita Myndraine en los titulares H1:

@font-face {
font-family: "Myndraine";
src: url(http://www.fontex.org/download/Myndraine.otf) format("truetype");
}

h1 {
font-family: "Myndraine", Verdana, sans-serif;
}

Y eso es todo. @font-face está soportada por Internet Explorer 7+, Firefox 3.5+ y Safari 3+ .

Via: CSSBlog

En la siguiente imagen se pueden ver los equivalentes entre Windows Vista, Windows anteriores y MacOS.

Y a continuación repasamos el código CSS de las tipografías estándares:

Arial

.classname {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
}

Arial Black

.classname {
color: #333333;
font-family: 'Arial Black', Gadget, sans-serif;
}

Arial Narrow

.classname {
color: #333333;
font-family: 'Arial Narrow', sans-serif;
}

Century Gothic

.classname {
color: #333333;
font-family: Century Gothic, sans-serif;
}

Copperplate Gothic Light

.classname {
color: #333333;
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
}

Courier New

.classname {
color: #333333;
font-family: 'Courier New', Courier, monospace;
}

Georgia

.classname {
color: #333333;
font-family: Georgia, Serif;
}

Gill Sans

.classname {
color: #333333;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}

Impact

.classname {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
}

Lucida Console

.classname {
color: #333333;
font-family: 'Lucida Console', Monaco, monospace;
}

Lucida Sans Unicode

.classname {
color: #333333;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

Palatino Linotype

.classname {
color: #333333;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

Tahoma

.classname {
color: #333333;
font-family: Tahoma, Geneva, sans-serif;
}

Times New Roman

.classname {
color: #333333;
font-family: 'Times New Roman', Times, serif;
}

Trebuchet MS

.classname {
color: #333333;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

Verdana

.classname {
color: #333333;
font-family: Verdana, Geneva, sans-serif;
}

Visto en: CSSblog

Los estilos de reset que se presentan aquí son intencionalmente genéricos. No hay un color o fondo predeterminados para el elemento BODY, por ejemplo. Particularmente, no se recomienda usar tal cual en tus propios proyectos: debería ser ajustado, editado, extendido y tuneado para que coincida con la base de reseteado específico que cada diseño requiera.

En otras palabras, es el puntapié inicial, no una caja negra que “se mira pero no se toca”.

Estos estilos de reset son gratuitos y de dominio público. Puede descargarse  una copia del archivo para modificarlo a gusto sin problemas. Y si lo prefieren copiar y pegar, a continuación se muestra el código:


/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}


/* remember to define focus styles! */
:focus {
outline: 0;
}


/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}


/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}


Traducido al español por mí, via: Meyerweb

Pero en este tutorial está la solución: menús flotantes, se deslizan a medida que uno escrolea la página, evitando así perder de vista el menú. Esto se logra con una combinación de HTML, CSS y jQuery, y lo mejor de todo, para los puristas, es que es 100% W3C-compliant.

Link: Creating a Floating HTML Menu Using jQuery and CSS

Demo

Descarga

Es bastante liviano comparado con otros y muy customizable.

Demos: Continuous slide, Numeric navigation, Multiple slides

Link: Easy Slider 1.7 en CSSglobe