Cómo utilizar la técnica CSS Sprite con CSS Sprites Generator

28 agosto 2012 § Deja un comentario

BubbleObjetivo: Aplicar la técnica del CSS Sprite con el Generador hasta obtener el código HTML y CSS para exponer iconos de redes sociales en una página web.

La técnica CSS Sprites consiste en exponer imágenes que forman parte de una imagen global. Con esta técnica mejoramos el uso de los recursos y logramos una descarga más ágil cuando se trata de imágenes repetitivas dentro del sitio web.

En Wikipedia
http://es.wikipedia.org/wiki/Sprite_(videojuegos)
podemos leer una completa presentación de los antecedentes de la técnica con los videosjuegos.

En esta entrega vamos a utilizar uno de los generadores de CSS Sprites que se ofrece de manera gratuita en Internet. La idea es entender cómo funciona la técnica para que en un próximo artículo veamos sus aplicaciones en el diseño de menús para la web. Vamos a desarrollar nuestro paso a paso.

Paso 1: Seleccionemos los iconos de redes sociales que formarán parte de la página web

En SixRevisions podemos descargar de manera gratuita un set de iconos para redes sociales diseñados por GraphicsFuel.com desde
http://sixrevisions.com/freebies/icons/socialmate-free/
El pack lleva por nombre “socialmate-icons.zip” y su tamaño es de 1098KB.

Supongamos que queremos mostrar en la página web los enlaces a las redes sociales Twiter, Facebook y LinkedIn. Seleccionamos los correspondientes iconos en el grupo “socialmate-icons-02” para fondos claros, en el tamaño 32×32 píxeles. Guardamos los 3 iconos en la carpeta “redes”.

Para dar variedad en la presentación de los iconos, vamos a aplicarle a cada icono el modo escala de grises con alguna aplicación para editar imágenes.

Por lo tanto tendremos en total 6 iconos, dos versiones para cada red social seleccionada.

Los ficheros de los iconos los hemos identificado como sigue:
facebook.png
facebook2.png
linkedin.png
linkedin2.png
twiter.png
twiter2.png
para distinguir la versión a color de la versión en escala de grises.

Paso 2: Ejecutamos el Generador del CSS Sprites

Vamos al enlace
http://csssprites.com/
donde reside el Generador del CSS Sprites.

Al hacer clic sobre el enlace “WHAT’S A SPRITE” en color amarillo (sección superior derecha) encontraremos suficiente documentación sobre las virtudes de la técnica en
http://www.bookofspeed.com/chapter3.html

Vamos a construir nuestra imagen Sprite con el Generador. Hacemos clic sobre “Seleccionar archivo” para comenzar a incorporar los iconos seleccionados al Generador.

Seleccionamos los iconos uno-a-uno de la carpeta “redes” que tenemos preparada:

Al finalizar la selección de los iconos, la pantalla muestra una imagen como la siguiente:

Si necesitamos subir más iconos, pulsaremos sobre el botón “NEED MORE?” lo cual abrirá una nueva caja para seleccionar otro fichero.  Al pulsar sobre “+options” el Generador muestra las opciones por defecto para la composición de la imagen Sprite. Esta configuración la podemos adaptar según nuestro proyecto.

Las opciones del Generador se refieren a:
El espacio entre cada icono y la caja (padding) es de 10 píxeles.
La anchura del borde de la imagen es cero; esto quiere decir que los iconos no tendrán borde.
La alineación por defecto de las imágenes a la izquierda mostrará los iconos en vertical; si seleccionamos la alineación en “top”, los iconos se distribuyen horizontalmente en la imagen Sprite (esta la opción que seleccionamos para nuestro Sprite).
El color del fondo por defecto es transparente; podríamos indicar la codificación del color que queramos en RGB.

Una vez realizados los cambios, pulsamos sobre el botón “Generate!”, con el cual podemos obtener los ficheros de la imagen completa Sprite en formato .PNG, la codificación en HTML y la codificación para los estilos CSS.
En la pantalla se muestran los enlaces necesarios para la descarga (u obtención de los ficheros):

Las indicaciones para nuestro fichero de estilos CSS las encontramos en:

En esta pantalla se observa la codificación para el estilo background de cada icono de acuerdo a su posición sobre el eje X y el eje Y en la imagen Sprite.
Descargamos la imagen Sprite “result.png”, la cual muestra la integración de los 6 iconos:

Tomamos nota de la codificación del Generador que utilizaremos en el fichero HTML y el fichero de estilos CSS:

En la codificación que nos aporta el Generador, vamos a destacar dos puntos importantes. En los estilos, tomaremos en cuenta la declaración correspondiente a la imagen Sprite (background:url(“result.png”);) y tendremos cuidado de establecer la ruta precisa para nuestra web.

También es importante saber las coordenadas de cada icono dentro del Sprite lo cual viene dado en la declaración del estilo para cada icono.

Paso 3: Establecemos la estructura básica de la página web

Partimos de darle estructura a nuestra página web, como por ejemplo en el fichero “index.html”:

El “index.html” en sus inicios incluye el enlace al fichero de los estilos “mystyle.css” que se localiza en la carpeta “css” y cada uno de los “div” que conforman la estructura básica de la página.

Los estilos los describimos en el fichero .CSS. Para establecer los estilos en la página global, utilizamos:

/* Estilos de página */

* {
margin: 0px;
padding: 0px;
}

body {
background-color: #FFF;
width: 960px;
margin-left: auto;
margin-right: auto;
}

Para los estilos de cada “div” especificamos:

/* Estilos de encabezado */
#header {
background-color: #FFFF99;
}

/* Estilos de contenido */
#content {
background-color: #66FFFF;
}

/* Estilos de redes sociales */
#social {
background-color: #FFFFFF;
}

/* Estilos de pie */
#footer {
background-color: #CCCCCC;
clear: both;
}

Con esta configuración inicial, en el navegador, se muestra la página centrada como aparece en la siguiente imagen:

Esto es suficiente para iniciar nuestro diseño y para el propósito de este tutorial. Ahora vamos a hacer la configuración del div correspondiente a las redes sociales (el div con id “social”) que es el que nos interesa en estos momentos.

Paso 4: Hacemos cambios en los ficheros HTML y CSS

En el fichero HTML (en nuestro caso, “index.html”) sólo hemos incorporado el código en el div “social” como se muestra en la imagen:

Hemos incorporado el link a cada red social, especificando un identificador (id de la red) particular para cada una. También hemos incorporado la etiqueta “title” dentro del enlace tal como recomiendan los estándares de la http://www.w3.org en http://www.w3.org/TR/html401/struct/links.html (en la sección 12.1.4 Link titles ) que será de utilidad para aplicaciones con voz y para motores de búsqueda.

En el fichero CSS, llamado “mystyle.css” incorporamos varias secciones. Para la sección general del id “social” especificamos los siguientes estilos a sus enlaces:

/* Estilos de redes sociales */
#social a {
background: url(“../images/result.png”);
background-repeat: no-repeat;
width: 32px;
height: 32px;
display: block;
float: left;
margin: 15px;
}

Veamos lo que nos indica el código anterior. Los enlaces de este div (notar que la segunda línea especifica “#social a”) tienen como fondo la imagen Sprite que construyó el Generador y hemos indicado la ruta precisa hasta el fichero. Indicamos, además, que la imagen de fondo no se repetirá. Establecemos que cada icono será mostrado con una anchura y altura de 32 píxeles. Especificamos que las imágenes se mostrarán en bloque (de lo contrario no se mostrará la imagen). Para que aparezcan los iconos en sentido horizontal (es lo que queremos) indicamos un float a la izquierda, y como queremos un espacio entre los iconos establecemos un margen de 15 píxeles alrededor de la caja de cada icono.

Pasemos ahora a los estilos de cada red social. Comenzamos con los estilos para Facebook:

/* Facebook */

#social #Facebook:link {
background-position: -0px -0px;
}

#social #Facebook:hover {
background-position: -126px -0px;
}

En nuestro proyecto web, queremos que para cada icono de redes sociales, haya 2 momentos: el momento del enlace tal como es y el momento del enlace cuando el puntero del ratón está sobre el icono. Por esta razón indicamos estilos para las pseudo-clases “link” y para “hover”. Analicemos en detalle la codificación utilizada.

El código expresa que el enlace de la red tiene una posición de 0px en el eje X, 0px en el eje Y, los cuales corresponden a la posición del icono en la imagen Sprite. El Generador nos ha facilitado estas coordenadas.

Luego, indicamos que al pasar el puntero del ratón sobre el icono (para la pseudo-clase hover) el icono a mostrar está situado a 126px en el eje X y 0px en el eje Y de la imagen Sprite. Para establecer la posición de este icono seguimos las indicaciones del Generador.

Recordar que los iconos se integraron en la imagen Sprite de izquierda a derecha en sentido horizontal y la manera de expresarlo en nuestro ejercicio es con números negativos.

Aplicamos un tratamiento similar a las otras 2 redes, LinkedIn y Twiter. A continuación mostramos los resultados directamente:

/* LinkedIn */

#social #LinkedIn:link {
background-position: -42px -0px;
}

#social #LinkedIn:hover {
background-position: -168px -0px;
}

/* Twiter */

#social #Twiter:link {
background-position: -84px -0px;
}

#social #Twiter:hover {
background-position: -210px -0px;
}

Con los cambios realizados, hemos logrado que los iconos se muestren tal como queremos en la página web:

Podemos ver el detalle de cómo funciona el cambio de los iconos al pasar el puntero del ratón sobre la imagen.

Ver demo del CSS Sprite en
http://misdemos.net78.net/CSSSprites1/
Una vez sobre la página, con el botón derecho en “Ver código fuente de la página” se puede obtener todo el código HTML y al hacer clic sobre el enlace del fichero CSS en el encabezado, podemos obtener los estilos que hemos comentado.

Con la técnica CSS Sprite hemos logrado utilizar una sola imagen que se cargará cuando se produzca la primera petición del servicio web y que en peticiones sucesivas, con los otros iconos, no será necesario consumir más recursos del sistema. La imagen Sprite se carga una sola vez en el sistema.

 
¿Por qué los iconos no cambian cuando el puntero del ratón pasa sobre ellas?
Revisar que entre los estilos aparezcan los correspondientes al enlace (link) y los que corresponden al pasar el puntero (hover). Además, comprobar que las coordenadas de cada icono están correctamente apuntadas.

¿Por qué no se muestran los iconos?
De lo más simple a lo complejo, comprobar que la imagen Sprite, con los iconos que queremos mostrar, está en el sitio adecuado y que la ruta para hacer su llamado está correctamente indicada. Otro aspecto importante es verificar que entre los estilos del div “social” aparezca la declaración del “display: block” para que pueda funcionar.

¿Por qué se muestra más área de la imagen de la que corresponde al icono?
Verificar que la propiedad de anchura (width) y altura (height) estén correctamente indicadas entre los estilos de los enlaces del div “social”.

En una próxima entrega veremos la aplicación de la técnica CSS  Sprite en el diseño del menú de una página web.

Anuncios

Etiquetado:, , , , ,

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

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

¿Qué es esto?

Actualmente estás leyendo Cómo utilizar la técnica CSS Sprite con CSS Sprites Generator en Instalar en el PC. Tutoriales paso a paso..

Meta