Chica Blogger

Los CSS sprites son una técnica para reducir el número de peticiones HTTP y disminuir el tiempo de carga de nuestro sitio, que consiste en “agrupar varias imágenes en una sola de mayor tamaño, para luego volver a separarlas en imágenes individuales mediante CSS” (me gusta la simpleza con que lo explica Román Cortés).

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

Uno de los mayores desafíos que enfrenta un diseñador web, o webmaster, o un blogger que quiera hacer algunos retoques en su theme o plantilla, es lograr que su sitio se vea igual en los navegadores más usados, o que tenga al menos una apariencia estéticamente aceptable.

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

Janko (Janko at Warp Speed) nos muestra una interesante técnica para crear menús desplegables sólo con un poco de CSS y HTML, pero sin javascript:

#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.

Las grandes ventajas de los menús CSS que podríamos llamar “pre-diseñados”, son que: (1) son muy estéticos, y le dan a un sitio una apariencia profesional; (2) generalmente son muy livianos; (3) son fáciles de añadir; (4) y que pueden adaptarse a cualquier sitio. Además, podemos encontrar una gran variedad de ellos en forma gratuita. Aquí hice una lista de los sitios que ofrecen menús CSS gratis:

13 STYLES

CSS MENU BUILDER

CSS MENU MAKER

CSS PLAY

DYNAMIC DRIVE

CSS PORTAL

EXPLODING BOY (1) (2) (3)

IZZY MENU

STYLED MENUS

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