Día 72: CSS Image Sprites

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 generar varias solicitudes al servidor.

El uso de sprites de imágenes reducirá la cantidad de solicitudes al 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, CSS especifica qué parte de la imagen img_navsprites.gif mostrar:

Ejemplo:

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 especifiquemos en CSS.

• width: 46px; height: 44px; - Define la porción de la imagen que queremos usar.

• background: 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:

Ejemplo explicado:

• #navlist {position:relative;} - La posición se establece en relative para permitir posicionamiento absolute en su interior.

• #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 absolute.

• #navlist li, #navlist a {height:44px;display:block;} - La altura de todas las imágenes es 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 (izquierda 0px, arriba 0px).

• #prev {left:63px;width:43px;} - Posicionado 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;} - Posicionado 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 hover

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

Tip: El selector :hover 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 hover:

Ejemplo:

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.

Resumen

Los sprites de imagen son una colección de imágenes en una sola imagen que reducen la cantidad de solicitudes al servidor y ahorran ancho de banda. Se pueden usar para crear una lista de navegación con una sola imagen de fondo y efectos de desplazamiento. También se pueden agregar efectos hover con una nueva imagen que contiene varias imágenes de navegación.

Traducido con 💚 desde W3Schools.com