Autor: Jack Bach

Bach es el autor principal de este blog. A los 15 años le dio por hacer un juego en flash y eso le llevó a hacer una web para mostrarlo al mundo. Ahora ya han pasado unos años y ha aprendido sobre todo XHTML y CSS para maquetar sus diseños web.

¿Qué son los Sprites para CSS?

Un sprite es una imagen imagen grande que contienen a su vez varias imágenes pequeñas. Gracias a la propiedad background-position de CSS podemos utilizar solo una parte de la imagen en el fondo. Así, podemos tener una imagen para todos los iconos del home o una para todas las imagenes de un menú.

¿Por qué molan?

La diferencia entre usar muchas imagenes o una sola que las contenga a todas es el número de peticiones. No se tarda lo mismo en cargar dos archivos de 10kb que uno de 20kb, ya que en el primer caso se hacen dos peticiones y en el segundo solo una. Cada petición augmenta el tiempo de carga y la transferencia.

Por otra parte, con otros sistemas la imagen no se carga hasta que no es requerido, haciendo que haya un intérvalo de tiempo en que no se muestra ninguna imagen. Por ejemplo, hay botones que cambian la imagen al pasar por encima a los que les pasa esto. Con este sistema como son partes de una misma imagen, podríamos decir que se cargan todas a la vez.

¿Como se utilizan los CSS Sprites?

La Imagen

Lo primero que haremos será coger todas las imagines que queremos utilizar y juentarlas en una sola. En nuestoro ejemplo vamos a hacer tres botones que cambirán de imagen cuando pasemos por encima. Por tanto necesitaremos dos imagenes para cada uno de los tres botones – un total de seis imagenes dentro de nuestro sprite.

El HTML

Vamos a centrarnos en el boton de “Suscríbete por Email”, que nos servirá de ejemplo general. Lo único que necistaremos en nuestro HTML será:

<div id="btn_email"><a href=”#”><img class="click" src="transp.gif" /></a></div>

El div será el que tendrá el sprite de fondo. Como queremos que al clickar el botón se abra una página web y sin Java Script no podemos crear un link en un div, insertamos una imagen transparente en el div que enlazará la página deseada. Esta imágen transparente no tiene que medir lo que mida el botón, sino que tiene que ser pequeña.

El CSS

Como hemos dicho, modificaremos el background-position en el css para utilizar la parte de imagen que deseemos. Para empezar vamos a determinar el ancho y la altura del botón, vamos a insertarle el fondo y vamos a posicionarlo:

#btn_email {
width: 155px;
height: 35px;
background: transparent url('sprite.png') no-repeat -170px 0;
}

Ahora lo que hacemos es modificar la posición del fondo para cuando el cursor esté encima del div:

#btn_email:hover {
background-position:-170px -36px;
}

Para acabar vamos a hacer que la imagen transparente que nos permitía clickar ocupe todo el ancho y toda la altura. Es tan fácil como darle las sigueintes propiedades:

.click {
width: 100%;
height: 100%;
}

Como detalle, me gustaría añadir que es posible que salga un borde de puntitos al clickar en la imagen. Podéis hacer que no se muestre añadiendo esto en el CSS:

:focus {
outline: 0;
}

Demo y Descarga

Descargar el PSD

Demo