Tutorial CSS Sprites

Uno de los requisitos fundamentales de una aplicación web es la carga rápida de la interfaz. Normalmente tenemos muyltitud de imágenes de iconos para las distintas funcionalidades de la aplicación, además de imágenes de menú, botones… CSS Sprites es una técnica que tiene su tiempo y que permite que la carga se agilice. Esto se realiza añadiendo todas nuestras imágenes en un único archivo y mostrando el fragmento necesario en cada caso mediante CSS con la propiedad background-position de manera que sólo necesitaremos cargar una única imagen de nuestro servidor al mostrar la interfaz.

En mi caso utilicé esta técnica para el desarrollo de un menú. No es muy conveniente usar imágenes en menú desde un punto de vista SEO pero en este caso las palabras de menú no eran muy relevantes.

El primer paso es crear el archivo .png con todas las imágenes necesarias (imagen para mostrar cada opción de menú, imagen para la opción seleccionada e imagen en la activación del evento a:hover). El resultado es el siguiente:

La rejilla o grid que se muestra en la imagen (es un screenshot de Fireworks) nos ayudará a rescatar cada imagen necesaria en cada caso. Cada cuadro de la rejilla tiene unas medidas de 25×25 píxeles, por tanto para la opción de INICIO se que las coordenadas X de cada imagen necesaria empiezan en los 25 pixeles (un cuadro). Las coordenadas Y de las distintas opciones y contando el número de cuadros serán 25, 100 y 175 píxeles.

Vamos con nuestro html, añado un menú (en mi caso una lista):

</pre>
<ul id="”menu_sprite”">
	<li><a href="”#”">Inicio</a></li>
	<li><a href="”#”">Servicios</a></li>
	<li><a href="”#”">Proyectos</a></li>
	<li><a href="”#”">Contacto</a></li>
</ul>
<pre>

Nuestro CSS queda de la siguiente manera:

ul#menu_sprite{margin:0px 0px 0px 120px; padding:0; list-style:none; clear:both;}
#menu_sprite li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px; margin-bottom:15px;}
#menu_sprite li a{background:url(‘../images/menu_sprite.png’) no-repeat; width:100%; height:100%; display:block;}

/* OPCION INICIO */
#menu_sprite li.inicio{width:105px; height:55px;}
#menu_sprite li.inicio a{background-position:-25px -175px;}
#menu_sprite li.inicio a:hover{background-position:-25px -25px;}
#menu_sprite li.inicio a.selected{background-position:-25px -100px;}

/* OPCION SERVICIOS */
#menu_sprite li.servicios{width:165px; height:55px;}
#menu_sprite li.servicios a{background-position:-150px -175px;}
#menu_sprite li.servicios a:hover{background-position:-150px -25px;}
#menu_sprite li.servicios a.selected{background-position:-150px -100px;}

/* OPCION PROYECTOS */
#menu_sprite li.proyectos{width:183px; height:55px;}
#menu_sprite li.proyectos a{background-position:-325px -175px;}
#menu_sprite li.proyectos a:hover{background-position:-325px -25px;}
#menu_sprite li.proyectos a.selected{background-position:-325px -100px;}

/* OPCION CONTACTO */
#menu_sprite li.contacto{width:165px; height:55px;}
#menu_sprite li.contacto a{background-position:-525px -175px;}
#menu_sprite li.contacto a:hover{background-position:-525px -25px;}
#menu_sprite li.contacto a.selected{background-position:-525px -100px;}

Como puede verse, asignamos las propiedades a la lista para convertirla en un menú horizontal (esto se hace en las primeras líneas) y hacemos la carga de la imagen diseñada para cada elemento de la lista menú (#menu_sprite li a). Las siguientes cuatro estructuras definen la posición que nos interesa de la imagen en cada opción.

Artículo basado en esta guía de Zach Dunn

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: