Menú CSS con Sprites

Cuando hacemos un sitio web, deberían preocuparnos sus tiempos de carga ya que influyen directamente en el posicionamiento web así como en la fidelización de clientes.

Definición

Un Sprite es una gran imagen que contiene más imágenes pequeñas dentro.

Los sprites comenzaron a utilizarse con los videojuegos 2D, esa gran imagen contenía a los personajes en sus diferentes posiciones y, mediante un algoritmo lograban un efecto de movimiento.

Puedes leer más sobre los sprites en wikipedia.

HTML del menú

Lo primero que vamos a crear es el menú en HTML:

<div id="menu">
	<ul>
		<li><a href="#">Inicio</a></li>
		<li><a href="#">Lore Ipsum</a></li>
		<li><a href="#">Dolor</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

Como veis, es un menú como cualquier otro, nada fuera de lo normal.

El Sprite

El sprite que utilizaremos será este:
Sprite CSS Katharsix

Este sprite contiene los fondos para los estados normal y hover.

El CSS

Aquí es quizá donde resida la "magia" de este menú, aunque tampoco es nada del otro mundo:

/*CSS para el menú*/
 
#menu {
	margin:20px;
	width:auto;
	height: auto;
}
 
#menu ul li{
	display: block;
	width: 100px;
}
 
#menu ul li a{
	padding-top: 7px;
	display: block;
	width: 100px;
	height: 21px;
	text-align: center;
 
	color:#fff;
	text-decoration: none;
 
	font-weight: bold;
	text-transform: uppercase;
	background: url(bgMenu.png) no-repeat;
}
 
#menu ul li a:hover{
	background: url(bgMenu.png) no-repeat;
	background-position: 0 -30px;
}

Sólo hay que destacar las líneas del a:hover (las últimas líneas), concretamente la del background-position.

Si te fijas, verás que tanto el estado normal del enlace como el estado hover comparten la misma imagen; la que corresponde con nuestro sprite.

La diferencia reside en que en el estado normal no especificamos una posición xy para la imagen de fondo y en el hover sí.

Concretamente, le estamos diciendo que en el efecto hover nos muestre ese mismo fondo pero a partir de los pixeles 0 (izquierda) y -30px (arriba), por lo que desplazará nuestro fondo 30 pixeles hacia arriba mostrando el efecto hover.

Con esto nos queda un menú CSS de lo más sencillo y evitamos unas cuantas peticiones a nuestro sitio; por cada enlace del menú, de no hacerlo con sprite, haría 2 peticiones (una para el estado normal y otra para el hover) y de esta manera hacemos sólo una petición.

Quizá en un sólo menú no se note mucho la diferencia, pero en un sitio web con muchas imágenes y muchos efectos hover como el de este menú su tiempo de carga sería más rápido.

Ver ejemplo

Descargar menuSpritesCSS v1.0

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

¡Únete ya a BFLabs GRATIS! Estreno próximamente... Más información