No son una técnica nueva ni poco usada -especialmente en los sitios con alto tráfico-, pero su implementación requiere un manejo más bien avanzado de CSS. CSS-sprit.es, sin embargo, lo hace más fácil: subimos el grupo de imágenes, y automáticamente entrega como output (en formato PNG o GIF con transparencia o JPG sin transparencia) una gran imagen que contiene todas las anteriores, junto a los correspondientes códigos CSS y HTML con la posición de cada imagen “pequeña”.

Es compatible con la mayoría de los navegadores, y también es útil para crear imágenes con efecto roll-over en sepia o escala de grises.

Visto en Makeuseof

Posts relacionados

• Pure CSS Menu: Generador de menús desplegables sin javascript
• Online Logo Maker: otro generador de logos
• Menús CSS desplegables sin javascript

En Cats Who Code, J.B. Jung nos presenta 15 técnicas para asegurar la compatibilidad entre navegadores al codificar en CSS. La lista incluye los clásicos trucos para IE como el “hack del asterisco” para todas las versiones de Internet Explorer (o la línea baja para IE6), el uso de comentarios condicionales, algunas líneas de código para browsers menos populares y herramientas web para probar tu sitio en distintas versiones de Internet Explorer, Mozilla Firefox, Google Chrome u Opera.

Enlace: 15+ techniques and tools for cross browser CSS coding

Posts relacionados

• Codeburner para Firefox
• Iconos web 2.0 estilo origami

#menu { height:120px; position:relative;
background: transparent url(header_bkg.png) repeat-x scroll top center;}
#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px; 
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

Es posible notar la inclusión del carácter “>” en tres selectores, que hace posible el efecto “dropdown” con categorías hijas.

*Nótese que he cambiado el nombre del selector principal (header) por “menu”, para prevenir que el header o el menú de mi blog tomen propiedades indeseadas.

Después de añadir el código CSS, el respectivo código HTML del menú sería el siguiente:

<div id="menu">
            <ul id="nav">
 
            <li><span>Menu 1</span>
                <ul>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
               </ul>
            </li>
 
            <li><span>Menu 2</span>
                <ul>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
               </ul>
            </li>            
            <li><span>Menu 3</span>
 
                <ul>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
               </ul>
            </li>
        </ul>
 
    </div>

Luego de añadir el menú, estamos en condiciones de modificar el código CSS para que éste tenga las propiedades deseadas. Pueden ver el demo en el sitio de Janko, o la modificación del menú que hice en mi blog de pruebas en Blogger.

Lo que me gusta de esta técnica, es que resulta muy fácil de incorporar y que no hay que preocuparse por los problemas de compatibilidad con distintos navegadores (salvo IE6, que no lee el caracter > en los selectores). Además, al no necesitar javascript es más liviana que una pluma.

Posts relacionados

• Pure CSS Menu: Generador de menús desplegables sin javascript
• 9 sitios para descargar menús CSS
• Crear un menú de botones con una sola imagen

13 STYLES

CSS MENU BUILDER

CSS MENU MAKER

CSS PLAY

DYNAMIC DRIVE

CSS PORTAL

EXPLODING BOY (1) (2) (3)

IZZY MENU

STYLED MENUS

Posts relacionados

• Menús CSS desplegables sin javascript
• Pure CSS Menu: Generador de menús desplegables sin javascript
• CSS-sprit.es: Un generador de CSS sprites

El equipo de Sitepoint tuvo la genial idea de regalar su libro “Arte y ciencia del CSS” (valor de venta: $39.95 USD) durante 14 días, de los cuales ya han pasado 6. El libro, en formato *.pdf, de más de 200 páginas consta de 7 capítulos que tratan acerca del manejo de títulos, imágenes, fondos, menús, formularios y tablas, entre otros. Está dirigido a webmasters, y escrito íntegramente en inglés, pero puede no ser difícil de comprender para quienes tienen algún grado de conocimiento acerca de las hojas de estilo en cascada.

Para conseguir el libro gratuitamente, es necesario seguir en Twitter a @sitepointdotcom. Casi instantáneamente, llega por mensaje privado un enlace para la descarga directa del ebook.

Tiempo restante para conseguir el libro: 8 días y 4 horas, desde la publicación de esta entrada. Hurry up!

Fuente | Visual Blast Media

Posts relacionados

• Vectores navideños de calidad, gratis por tiempo limitado
• ¿Cuánto tiempo gastas en Twitter?
• Octubre rosa: El mes de la prevención del cáncer de mama