h1

CSS Sprites

12 diciembre 2008
Antes que nada, quería explicar que esta entrada no pretende mostrar un ejemplo práctico de como se usan los CSS Sprites, mi objetivo es dar unas nociones de qué es exactamente esta técnica. Los CSS Sprites es una técnica antigua que se usaba en los juegos bidimensionales y que con un poco de CSS esta técnica se puede aplicar al mundo web. La idea es muy sencilla, todas las imágenes que necesitamos se unifican en una sóla y despues mediante las CSS elegimos la zona de la imagen global que queremos usar en cada momento.
 Imagen usada en CSS Stripes

Imagen usada en CSS Stripes

Mediante CSS creamos las capas necesarias, en caso de que sea una imagen que cambia, es decir, que por ejemplo sea un enlace que cuando estamos encima, pinchamos o ya ha sido visitado,  usamos la técnica de reemplazo de imágenes que más nos guste. Después lo que hay que hacer es posicionar las capas mediante CSS donde deseemos y finalmente le añadimos una imagen de fondo a nuestra capa con las coordenadas que queremos que se muestre de la imagen maestro. Algo tal que así:

   #capa  {
    background: transparent url(nav_logo3.jpg)
    -100px -200px no-repeat;}

El primer valor es el offset horizontal, desde el extremo izquierdo, y el segundo valor es el offset vertical. En realidad, necesitamos jugar un poco con los valores de los pixeles para comprender como funcionan los offsets, pero en cuanto lo hagamos unas cuantas veces, lo dominaremos sin problema.

¿Cuáles son los beneficios y los problemas que existen con esta técnica? Para empezar diremos que en Opera 6, no se pueden poner imágenes a los links, aunque si se hace bien, aunque no se muestren las imágenes nuestros enlaces se veran bien y funcionaran. Otro problema surge si un usuario ha decidido quitar las imágenes, es decir, ha deshabilitado la opción de mostrar imágenes del navegador, pero sigue usando las css, en ese caso, todos los elementos que usen una imagen de fondo no la tendran, en el caso de que lo hayamos usado para un enlace, el enlace funcionará, pero no se verá nada. Una de las ventajas es que el tamaño de la imagen maestro es menor que la suma de los tamaños de las imagenes que la componen.

 
 
 
 
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

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

A %d blogueros les gusta esto: