La técnica conocida como CSS Sprites consiste en aunar varias imágenes en una sola y mediante CSS mostrar una u otra parte de dicha imagen según nos convenga. Con esto reducimos las peticiones al servidor ya que la imagen se descarga solo una vez y se reutiliza en varios sitios de la web. Es muy fácil de aplicar y los beneficios son evidentes.
Seguramente os suene la palabra sprite al mundo de los vídeojuegos, donde se utilizan para almacenar en una misma imagen todas las partes y posibles movimientos de, por ejemplo, un personaje para después mostrarlos por separado.
Veamos un ejemplo práctico de CSS Sprites.
1- Creamos el sprite con varias imágenes
En este caso vamos a utilizar la siguiente «tira» de iconos sociales de la web amiga Bienvenidos a Lilliput.
2- Definimos la estructura HTML
El código HTML podría quedar como sigue:
<aside id="socialmediabal">
<h3 class="widget-title">¡Viaja con nosotros!</h3>
<p>
<a class="gplus" title="Google Plus" href="https://plus.google.com/u/2/+PiliManriqueMedina"> </a>
<a class="facebook" title="Facebook" href="https://www.facebook.com/BienvenidosaLilliput"> </a>
<a class="twitter" title="Twitter" href="https://twitter.com/PiliManrique"> </a>
<a class="instagram" title="Instagram" href="http://instagram.com/bienvenidosalilliput"> </a>
<a class="rss" title="RSS Feed" href="http://www.bienvenidosalilliput.com/feed"> </a>
</p>
</aside>
3- Definimos el background en CSS
En este caso definiremos la misma imagen background a todos los enlaces:
#socialmediabal a {
background-image: url("images/socialmedia.png");
background-repeat: no-repeat;
cursor: pointer;
padding: 15px 19px 18px 20px;
text-decoration: none;
}
Con esto obtenemos el siguiente resultado
Como no hemos especificado una posición del background, todos los enlaces han tomado por defecto top left y, por lo tanto, nos muestran todos el mismo icono.
4- Establecemos la posición del fondo para cada clase
A cada enlace le hemos asignado una clase diferente, solo tenemos que definir una posición del fondo diferente para cada una de modo que el icono que se vea sea el que corresponde.
#socialmediabal a.gplus{background-position:-5px 0px;}
#socialmediabal a.facebook{background-position:-51px 0px;}
#socialmediabal a.twitter{background-position:-100px 0px;}
#socialmediabal a.pinterest{background-position:-148px 0px;}
#socialmediabal a.instagram{background-position:-198px 0px;}
#socialmediabal a.rss{background-position:-245px 0px;}
Si os fijáis solo cambia la componente horizontal de la posición del fondo, mientras que la vertical permanece a 0px. Esto es porque el sprite que hemos utilizado solo tenía una fila, pero podíamos haberlo configurado como hubiésemos querido, por ejemplo:
En ese caso sí que habríamos tenido que jugar también con la posición del eje y:
#socialmediabal a.gplus{background-position:-5px 0px;}
#socialmediabal a.facebook{background-position:-51px 0px;}
#socialmediabal a.twitter{background-position:-100px 0px;}
#socialmediabal a.pinterest{background-position:-5px -51px;}
#socialmediabal a.instagram{background-position:-51px -51px;}
#socialmediabal a.rss{background-position:-100px -51px;}
Trackbacks/Pingbacks