Sprites de imagen CSS
Sprites de imagen
Un sprite de imagen es una colección de imágenes puestas en una sola imagen.
Una página web con muchas imágenes puede tardar mucho en cargarse y genera varias solicitudes de servidor.
El uso de sprites de imágenes reducirá la cantidad de solicitudes del servidor y ahorrará ancho de banda.
Sprites de imagen - Ejemplo simple
En lugar de usar tres imágenes separadas, usamos esta única imagen ("img_navsprites.gif"):
Con CSS, podemos mostrar solo la parte de la imagen que necesitamos.
En el siguiente ejemplo, el CSS especifica qué parte de la imagen "img_navsprites.gif" mostrar:
Ejemplo
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Ejemplo explicado:
<img id="home" src="img_trans.gif">- Solo define una pequeña imagen transparente porque el atributo src no puede estar vacío. La imagen mostrada será la imagen de fondo que especificamos en CSSwidth: 46px; height: 44px;- Define la porción de la imagen que queremos usarbackground: url(img_navsprites.gif) 0 0;- Define la imagen de fondo y su posición (izquierda 0px, arriba 0px)
Esta es la forma más fácil de usar sprites de imagen, ahora queremos expandirla usando enlaces y efectos de desplazamiento.
Sprites de imagen - Crear una lista de navegación
Queremos usar la imagen del sprite ("img_navsprites.gif") para crear una lista de navegación.
Usaremos una lista HTML, porque puede ser un enlace y también admite una imagen de fondo:
Ejemplo
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif')
0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif')
-91px 0;
}
Ejemplo explicado:
- #navlist {posición: relativa;} - la posición se establece en relativa para permitir el posicionamiento absoluto dentro de ella
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - el margen y el relleno se establecen en 0, se elimina el estilo de lista y todos los elementos de la lista se colocan en posición absoluta
- #navlist li, #navlist a {height:44px;display:block;} - la altura de todas las imágenes es de 44px
Ahora comience a posicionar y diseñar para cada parte específica:
- #home {left:0px;width:46px;} - Posicionado completamente a la izquierda, y el ancho de la imagen es de 46px
- #home {background:url(img_navsprites.gif) 0 0;} - Define la imagen de fondo y su posición (0px a la izquierda, 0px arriba)
- #prev {left:63px;width:43px;} - Colocado 63px a la derecha (#home ancho 46px + algo de espacio adicional entre elementos), y el ancho es 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Define la imagen de fondo 47px a la derecha (#home ancho 46px + 1px divisor de línea)
- #next {left:129px;width:43px;}: se coloca 129px a la derecha (el inicio de #prev es 63px + #prev ancho 43px + espacio adicional), y el ancho es 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - Define la imagen de fondo 91px a la derecha (#home ancho 46px + 1px divisor de línea + #prev ancho 43px + 1px divisor de línea)
Sprites de imagen - Efecto de desplazamiento
Ahora queremos agregar un efecto de desplazamiento a nuestra lista de navegación.
Sugerencia: el :hoverselector se puede usar en todos los elementos, no solo en los enlaces.
Nuestra nueva imagen ("img_navsprites_hover.gif") contiene tres imágenes de navegación y tres imágenes para usar con efectos de desplazamiento:
Debido a que se trata de una sola imagen, y no de seis archivos separados, no habrá demoras en la carga cuando un usuario pase el mouse sobre la imagen.
Solo agregamos tres líneas de código para agregar el efecto de desplazamiento:
Ejemplo
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
}
Ejemplo explicado:
- #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - Para las tres imágenes flotantes especificamos la misma posición de fondo, solo 45px más abajo