Publicidad

CSS. Como crear buenos Sprites

Autor: | Categoría:

Primero de todo: ¿Qué es un Sprite?

Bien, un sprite es una imagen que contiene todos los elementos utilizados como backgrounds en tu web.

Y…¿Para qué sirve?

Muy fácil, el sprite sirve principalmente para dos cosas, 1º tener todos los backgrounds ordenados y no tener que ir inventando nombres que después no recuerdes y 2º para optimizar el tiempo de carga de tu web. ¿Qué crees que es más optimo para tu servidor, hacerle una petición de una imagen que pesa 50kb o 10 peticiones de 5kb para cada uno de los backgrounds que hayas usado? Pues aunque a primera vista podría parecer lo mismo no lo es, ya que una petición sólo necesita un tiempo de respuesta del servidor y la transferencia de tal petición, si pedimos 10 elementos, tiene que hacer esta misma operación y aumentará notablemente el tiempo de carga de nuestra página, así que mucho más óptimo sólo hacer una petición.

Bueno, hasta aquí la teoría del sprite, pero centrémonos en lo que realmente nos interesa, la eficiencia de estos. Para utilizar esta técnica, lo único que tenemos que hacer es, como ya he dicho antes, crear una imagen contenedora de todos las imágenes que usemos en nuestra página. Antes he dicho de todos los elementos que utilizemos como backgrounds, de ahí que para que funcione correctamente y esté el máximo optimizado posible insertaremos también las imágenes que utilizamos como anchors.

Ahora si: Implementación

¿Cómo llamamos en el css al sprite? Muy fácil:

Sobretodo no utilizar los atributos top, left, right y bottom, siempre buscaremos su posición exacta en píxels y de izquierda a derecha y de arriba a bajo, usando valores negativos en el posicionamiento. ¿ Por qué? Pues por qué si decidimos incorporar más elementos a nuestro sprite, si no damos la coordenada exacta del píxel, al augmentar el tamaño del sprite, se correrán todos los elementos que contiene en nuestro css, y si añadimos más elementos al sprite lo haremos en la derecha y hacia abajo.

Truquito: Como hacerlo con Rollovers

Si usamos el código que he puesto arriba lo que conseguimos es un background estático, pero, ¿y si queremos un anchor con rollover? Ningún problema, esto tiene solución. Lo que debes hacer es lo siguiente:

Añadimos la subclase :hover a la clase principal, de esta manera, al hacer un rollover, el background del anchor ser ubica en la posición que nosotros deseamos.

Lo más importante, hasta ie6 lo interpreta bien 😀

Fácil, ¿no?

Publicidad
Etiquetas: , , ,
  • Eva

    Hola Xavi!Felicidades por tu blog! Creo que lo has montado muy bien, así q espero que tengas éxito y ya sabes, en lo que pueda te ayudaré! 🙂

  • Gracias Eva! a ver si esto crece y hacemos un blog wapo 😉

¡Suscríbete!

¡Sé el primero en enterarte de las novedades del diseño web y mejora tus conocimientos!

Suscríbete al blog por correo electrónico

Introduce tu correo electrónico para suscribirte a este blog y recibir notificaciones de nuevas entradas.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies