Actualizado 18 septiembre 2007
A veces para un elemento se define un fondo que cambia según el estado de dicho elemento.
¿Varios fondos suponen varias imágenes? No.
Pongamos por ejemplo un listado de enlaces en una barra de navegación vertical, en la que los enlaces de los elementos de lista (li) tienen tres fondos distintos:
- El fondo de estado normal.
- El fondo para estado hover (cuando se pasa sobre el enlace).
- Y el fondo para el elemento de lista correspondiente a la página que se visualiza en este momento.
Se pueden crear esos fondos por separado, de forma que al cargar la página solo se descargarán el primer y el tercer fondo. El del estado hover se descargará cuando algún enlace sufra ese estado, por lo que al pasar el puntero sobre un enlace con ese fondo para el estado hover, el fondo no aparecerá de inmediato.
O se puede crear una imagen que contenga al mismo tiempo todos los fondos. Antes había tres reglas CSS para definir los fondos de los enlaces de los elementos de lista, y ahora también, con la diferencia que se pondrá la misma imagen en las tres reglas. La diferencia estará en el posicionamiento del fondo. Con la propiedad background-position (o en background) se seleccionará que parte de la imagen se mostrará como fondo. ¿Como? Jugando con posiciones negativas.
La imagen utilizada:
Este es el XHMTL utilizado para la lista:
<ul>
<li><a href="#">Opción 1</a></li>
<li class="seleccionado"><a href="#">Opción 2</a></li>
<li><a href="#">Opción 3</a></li>
<li><a href="#">Opción 4</a></li>
<li><a href="#">Opción 5</a></li>
</ul>Y este el CSS:
ul {
list-style:none;
width:160px;
}
ul li a {
display:block;
width:142px;
height:18px;
line-height:18px;
padding-left:18px;
text-decoration:none;
background:#D4DDED url(bg_css_sprites.gif) no-repeat 0 0;
color:#003596;
font-weight:bold;
font-family:verdana,arial,sans-serif;
font-size:12px;
}
ul li.seleccionado a {
background:#CCE5A2 url(bg_css_sprites.gif) no-repeat 0 -18px;
color:#4A601C;
}
ul li a:hover {
background:#F8A1BE url(bg_css_sprites.gif) no-repeat 0 -36px;
color:#762938;
}Referencias y enlaces relacionados
CSS sprites
- CSS Sprites: Image Slicing’s Kiss of Death (Dave Shea, A List Apart)
- Rollovers con CSS y sin precarga de imágenes en 4 pasos y medio (Caótico neutral)
- Fast Rollovers Without Preload (Wellstyled.com)
- Sliding Doors Meets CSS Sprites (Fiftyfoureleven)
- What Are CSS Sprites? (informit.com)