Facebox

Facebox es un visor de imágenes y otros elementos basado en jquery, es como lightbox pero abre las ventanas con el estilo de las ventanas emergente en Facebook. Denle una revisada, parece interesante.

9 consejos para diseñar emails

Estos son los consejos básicos, si alguna vez un cliente te pide diseñarle un email en HTML estos puntos son un buen inicio. 9 best practices for email design. Lo vi en cssglobe.com

50+ CSS Buenas prácticas y guías para escribir CSS

Encontré este post y la verdad es que sirve mucho, hay algunas cosas realmente interesantes en la lista.

Agregar bullets a los headers

Este es un recurso muy utilizado y es fácil de hacer, a continuación vamos a ver paso a paso como hacerlo.

Este mini-turorial sirve en los casos que queremos agregar un bullet a la ziquiera de nuestros headers H1, H2, H3, según sea el caso.

Aquí un ejemplo:

Lee todo el post »

Preload de imágenes con CSS

Haces un menú con fondo transparente o de color sólido, en el rollover necesitas que despliegue una imagen, ya sea un gradient, una textura, etc. y es ahí cuando comienza el dolor de cabeza, porque la imagen que carga en el rollover tiene un delay antes de aparecer, esto es muy molesto y hace que el sitio parezca lento.

Hay soluciones basadas en javascript para hacer el preload de un menú, pero queremos evitar el uso de js al máximo, sobre todo cuando no es necesario, así que recurrimos al CSS para que haga el trabajo. Lee todo el post »

5 tips para mejorar tus archivos de CSS

1. Etiqueta las áreas generales. Esto hará que encuentres mucho más fácilmente el bloque que quieres modificar. Tienes que "comentar" el nombre del bloque, esto se logra poniendo el título dentro de /* el título */

/* -- Header -------------------------- */
#header { }
 
/* -- Contenido ----------------------- */
#contenido { }
 
/* -- Footer -------------------------- */
#footer { }

2. Manten tus bloques agrupados, por ejemplo todos los elementos que vayas a controlar con CSS deben quedar en el mismo bloque y después del elemento padre.

#contenido { }
.contenido h1 { }
.contenido p { }

3. Usa el shorthand, o lo que es lo mismo la versión abreviada del CSS. Hay diferentes sitios donde puedes ver como es el shorthand, aquí pongo una liga a una de las guías de shorthand.

Sin shorthand

#midiv {
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 15px;
}

Con shorthand

#midiv {
font: normal 12px/15px Verdana, Arial, Helvetica, Sans-serif;
}

4. Genera los nombres de las clases y/o divs de forma inteligente, por ejemplo en vez de nombrar una clase .textorojo, nómbrala .alerta, así cuando quieras cambiar el color de la alerta su nombre seguirá siendo util y no tendrás que modificar tus archivos HTML.

Otro caso es si tienes un layout de dos columnas nombra a estas por la función que desempeñan, por ejemplo: #subnav, #contenido en vez de nombrarlas #col1, #col2 porque si las cambias de lugar las confusiones comienzan.

5. No uses altas y bajas en los nombres de las clases o los divs, esto puede hacerte perder mucho tiempo si tienes un archivo de CSS de varios cientos de líneas de código.

Videobox, despliega tus videos en overlay

Seguramente ya conoces Lightbox, herramienta que te permite abrir una imagen sobre la página sin que tengas que cambiar a otra página. Aquí en nudonation la usamos para desplegar las imágenes.

Paseándome por el foro de mootools me encontré este script llamado videobox que te permite hacer lo mismo pero con archivos de video. El script está montado sobre mootools, pesa sólo 8kb y también usa swfObject para inyectar el flash.

Hay sitios donde queda como anillo al dedo, si no quieres poner los videos completos y que tu sitio se haga extremadamente largo, puedes poner una lista de links y desde ahí abrir los videos.

Este script puede abrir archivos de: Youtube, Metacafe, Google Video, iFilm, custom flash, Quicktime(mov)new, WMV(or ASX)new and FLV files. Lo puedes descargar aquí.

Usando unicode en las clases del CSS

Si no le vas a dar uso a esto de todos modos te recomiendo que lo leas, cuando menos es interesante.

Usando unicode en las clases del CSS

Aunque es interesante no es una buena idea hablando desde el punto de vista semántico, las clases deben mantenerse en texto plano. De cualquier forma es un interesante descubrimiento.

Layouts en CSS

Este es otro directorio de layouts hechos con CSS, según dice en el sitio son "Grado A" osea que se ven bien en todos los navegadores además de que están optimizados para ayudarte con el posicionamiento en los buscadores.

El código de los layouts es muy limpio, un buen recurso sin duda. Puedes descargarlos aquí.

Menú desplegable debajo de una película de flash

Post geek: Este es un problema muy común, y debo decir que la primera vez que me pasó tardé un buen rato en encontrar la solución. Espero que si alguien tiene este problema, este post le ayude a solucionarlo. En realidad es muy sencillo.

El error:

Como ven al hacer rollover sobre un menú desplegable, este aparece por debajo de la película de flash. Para evitar esto es necesario hacer ajustes en la sección del código de flash. Para que no se confundan, vamos al código.

Lee todo el post »

DIV centrado horizontal y verticalmente

Este es un dolorcito de cabeza con el que todos nos hemos encontrado :p
Aquí puedes verlo funcionando.

Aquí el truco:

#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;}

Layout Gala

El reto era obtener el mayor número de layouts basados en el mismo markup, cada uno con CSS y HTML válido, sin hacks y compatibles entre browsers. El resultado es un set de 40 layouts funcionales y listos para descargarse. Por: Alessandro Fulciniti

Muy buen recurso, la verdad es que muchas veces me he quebrado la cabeza tranto de hacer esto o lo otro, pero aquí vemos ejemplos funcionando y utilizando recursos al mínimo.