Últimamente estoy intentando profundizar y aprender todo lo posible sobre el diseño en general y el web en particular. Es mi punto más flojo, algo que se me da fatal pero que aún así me encanta y me gustaría dominar al menos en un nivel básico.

Entre las cosas que he aprendido está CSS Sprites, que no es más que una técnica por la cual podemos tener en un solo archivo diferentes imágenes y, mediante CSS, elegir la que nos interese en cada uno de los casos. Esto es realmente útil ya que si nuestro sitio hace uso de varias imágenes, con esta técnica tan solo tendríamos que cargar una en vez de todas y cada una de ellas.

¿Y para que se puede usar? Pues el ejemplo más claro es esas imágenes las cuales, al pasar el ratón por encima de ellas, cambian de color o forma. Esto habitualmente se hace teniendo dos imágenes y cargando una u otra en función de la posición del cursor. Dependiendo de la velocidad del servidor y del tamaño de la imagen puede que haya un retraso entre situar el cursor y que se cambie, lo cual no solo queda mal si no que puede confundir al usuario. Si lo hacemos con CSS Sprites ya tendríamos la imagen precargada y al pasar el cursor tan solo cambiaría, por decirlo de alguna forma, el foco a donde apuntar.

Pese a todo no es una técnica del todo sencilla, ya que tenemos que jugar con las coordenadas de la imagen para en todo momento mostrar lo que realmente queremos. Esto se realiza con el atributo background-position y que en el ejemplo que realizan en Cristalab comprendereis mejor su funcionamiento.

Pero también quiero compartir con vosotros una ayudita, y se trata de CSS Sprites Genrator, una herramienta web a la cual le podemos pasar las diferentes imagenes que queramos “meter” en una y él solito lo hará y nos dará no solo una imagen resultado (en jpg y png) si no el código css necesario para “capturar” cada una de ellas.

css_sprites_generator

¿A que ya no os parece tan complicado?