Este sitio web utiliza cookies para realizar análisis y mediciones de tus visitas. [ Acepto ] [ Más información aquí ].

Cómo crear un CSS sprite

Combinar el mayor número de imágenes posible en ficheros CSS Sprites reduce el número de llamadas al servidor y el retardo en cargar recursos,

haciendo más rápida tu página y más valiosa ante Google. Crear CSS Sprites es una parte esencial del Web Performance Optimization

de tu sitio web. Los pasos que debes seguir son:

1. Crea un mosaico en GIF, JPG o PNG de todas las imágenes que quieras separar:

2. Incluye en tu hoja de estilos CSS una caja DIV por cada imagen que desees incluir.

Esta caja DIV incluirá dos coordenadas que indican el punto superior izquierdo de tu imagen.

Siempre serán valores negativos (horizontal y vertical), y los puedes obtener abriendo la imagen en Photoshop y poniendo el cursor en el punto superior izquierdo.

Luego, mediante los atributos height y width, define el alto y ancho de la caja DIV

.rey_corazon {background:url("https://www.danielpinero.com/images/naipes.png") repeat scroll -84px -118px

transparent;height:118px;width:84px;}

3. Inserta la caja DIV, ¡y listo!

<div class="rey_corazon"></div>

Crea CSS sprites separados para diferentes tipos de imágenes: un GIF para iconos y transparencias con poca diversidad cromática, JPG para fotografías,

y PNG para imágenes complejas con transparencias.

Añadir comentario