Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a CSS sprites

Datos de búsqueda

Etiqueta ‘CSS sprites’

CSS sprites (2): posicionamiento de la imagen de fondo

Fecha de publicación: 2007/09/18

Este artículo es una ampliación a CSS Sprites: rollover utilizando una sola imagen.

En el artículo anterior se daban valores negativos para el eje de coordenadas Y en la propiedad CSS background-position. En este caso el valor se puede obtener de la siguiente forma: se resta a la altura total de la imagen la altura del sprite que se quiere ver y la coordenada Y de la propiedad background-position.

Ejemplo: la altura total de una imagen con 2 sprites es de 100px. Cada sprite tiene una altura de 6px, y el sprite que está inicialmente tiene un background-position:0 4px;. Entonces se hará la siguiente resta: 100px-6px-4px=90. La posición del eje Y que habrá que dar será -90px.

Datos del artículo:

CSS Sprites: rollover utilizando una sola imagen

Fecha de publicación: 2007/05/01

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:

Imagen de ejemplo CSS sprites

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;
}

Ver ejemplo de CSS sprites.

Referencias y enlaces relacionados

CSS sprites

Recursos de apoyo

Datos del artículo:

Información del sitio