12Ene
'Sprite de iconos con múltiples imágenes'

¡Hola! Hoy voy a enseñaros un truco de css para evitar un problema bastante usual a la hora de maquetar un icono que tenga hover en páginas web.

 
Cuando realizamos una maquetación estándar de un enlace con una imagen de fondo y queremos que tenga efecto hover, lo normal sería hacer esto:
 

1
2
3
4
5
6
7
8
9
10
.mi-enlace {
	width: 20px;
	height: 20px;
	background: url(images/fondo.png);
}
.mi-enlace:hover {
	width: 20px;
	height: 20px;
	background: url(images/fondo_hover.png);
}

En teoría es correcto, pero en la práctica tiene un problema: cuando aún no hemos cargado las imágenes, al poner el puntero encima del enlace se producirá un pequeño latigazo, quedándose el enlace sin fondo durante unas décimas de segundo mientras carga el background del estado hover, produciendo un efecto visual bastante cutre.

 
Para evitar esto realizaremos lo que se conoce como sprite. Voy a poner de ejemplo las redes sociales de la cabecera de esta web:

 
Iconos Redes Sociales

 
Lo importante es crear una imagen que contenga todos los iconos que queramos utilizar, tanto el estado normal como el estado hover. Después vamos a nuestro código css, donde la clave estará en utilizar la propiedad background-position para los estados hover. Veamos el ejemplo para el css del icono de facebook:

 

1
2
3
4
5
6
7
8
9
10
11
#social-links a.facebook {
	width: 25px;
	height: 24px;
	background: url(images/social_icons.png);
	background-position: -164px 0;
	display: block;
}
#social-links a.facebook:hover {
	background: url(images/social_icons.png);
	background-position: -164px -26px;
}

 
El primer valor indica la posición horizontal y el segundo la posición vertical. Con este “truco” conseguiremos tener cargados todos los iconos de nuestro sprite y al pasar el ratón por encima no dará ningún latigazo pre-carga. Después, con algo de jQuery podremos crear animaciones para el efecto hover.

 
Espero que os haya sido de ayuda, ¡hasta la próxima!