CSS Técnica de sprites de imágenes

Sprites de imágenes

Un sprite de imágenes es un conjunto de imágenes individuales.

Una página web con muchas imágenes puede tardar mucho tiempo en cargarse y generar múltiples solicitudes al servidor.

El uso de sprites de imágenes reduce el número de solicitudes al servidor y ahorra ancho de banda.

Sprites de imágenes - Ejemplo simple

En lugar de usar tres imágenes independientes, usamos esta única imagen ("img_navsprites.gif"):

Con CSS, podemos mostrar solo la parte de la imagen que necesitamos.

En el siguiente ejemplo, CSS especifica mostrar una parte de la imagen "img_navsprites.gif":

Análisis del ejemplo:

• <img class="home" src="img_trans.gif.html" /> - Como no puede estar vacío, el atributo src solo define una pequeña imagen transparente. La imagen mostrada será la imagen de fondo que especifiquemos en CSS.
• Ancho: 46px; Alto: 44px; - Define la parte de la imagen que usamos.
• background:url(img_navsprites.gif) 0 0; - Define la imagen de fondo y su posición (izquierda 0px, superior 0px).

Esta es la forma más sencilla de usar sprites de imágenes. Ahora usaremos enlaces y efectos hover.

Sprites de imágenes - Crear una lista de navegación

Queremos usar el sprite de imagen ("img_navsprites.gif") para crear una lista de navegación.

Usaremos una lista HTML, porque puede contener enlaces y además admite imágenes de fondo:

Análisis del ejemplo:

• #navlist{position:relative;} - La posición se establece como relativa, para que los elementos internos puedan usar posicionamiento absoluto.
• #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin y padding se establecen en 0, se elimina el estilo de lista, y todos los elementos de la lista tienen posicionamiento absoluto.
• #navlist li, #navlist a{height:44px;display:block;} - La altura de todas las imágenes es 44px.

Ahora comencemos con el posicionamiento y el estilo de cada parte específica:

• #home{left:0px;width:46px;} - Posicionado a 0px desde la izquierda, y el ancho de la imagen es 46px.
• #home{background:url(img_navsprites.gif) 0 0;} - Define la imagen de fondo y su posición (izquierda 0px, superior 0px).
• #prev{left:63px;width:43px;} - Posicionado a 63px desde la izquierda (ancho de #home 46px + algo de espacio extra entre elementos), ancho 43px.
• #prev{background:url('img_navsprites.gif') -47px 0;} - Define la imagen de fondo con desplazamiento horizontal de 47px (ancho de #home 46px + 1px de línea separadora).
• #next{left:129px;width:43px;} - Posicionado a 129px desde la izquierda (#prev 63px + ancho de #prev 43px + espacio restante), ancho 43px.
• #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - Define la imagen de fondo con desplazamiento horizontal de 91px (#home 46px + 1px de separador + ancho de #prev 43px + 1px de separador).

Sprites de imágenes - Efecto hover

Ahora queremos añadir un efecto hover a nuestra lista de navegación.

	El selector :hover se utiliza para mostrar el efecto cuando el mouse se sitúa sobre un elemento. Consejo:El selector :hover se puede aplicar a todos los elementos.

Nuestra nueva imagen ("img_navsprites_hover.gif") contiene tres imágenes de navegación y tres imágenes:

Debido a que es una sola imagen, en lugar de 6 archivos de imagen separados, no habrá retraso de carga cuando el usuario pase el mouse sobre la imagen.

Solo añadimos tres líneas de código para agregar el efecto hover:

Análisis del ejemplo:

• Dado que el elemento de lista contiene un enlace, podemos usar la pseudo-clase :hover
• #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - Para las tres imágenes de hover, especificamos la misma posición de fondo, solo que cada una se desplaza 45px hacia abajo.