Creación de un menú con CSS Sprite

En este sencillo tutorial o tips, vamos a construir un simpático y sencillo menú utilizando la antigua técnica de los css sprites, por si no sabes esta técnica consiste en utilizar una sola imagen para un objetivo, pero esta imagen a su vez está compuesta por varias o muchas imágenes que se mostraran de acuerdo a su posición por medio de la propiedad de css background-position, esta técnica es muy buena utilizarla en nuestros trabajos donde utilizamos imágenes para el diseño, ya que tendremos velocidad en la descarga y renderizado de nuestra web, ya que solo cargamos una imagen y no varias y así reducimos el consumo de recursos de el servidor. Como vez siempre será bueno utilizar esta técnica. En fin, esto es lo que vamos a hacer: Lo que vamos a necesitar será una imagen, una lista html y un poco de css3. Esta será la imagen: css sprite Si este menú lo hiciéremos sin esta técnica de css sprite cada una de las imágenes las cargaríamos individualmente, es decir tendríamos 5 imágenes diferentes, claro está, esto sería poco optimizado para nuestra web.

El HTML

En el HTML vemos una lista <ul> con una clase y cada ítem <li> de esta lista tiene una clase para darle su respectivo estilo y su respectivo enlace <a> para formar este menú.

El CSS

Estilos para la lista <ul> con la clase categorías.

A esta lista le damos un tipo de letra, un estilo bold quitamos los margin y padding, quitamos el estilo típico de las listas y le damos un ancho especifico.

Los estilos anteriores los aplicamos a los enlaces <a> en general de esta lista. Damos un alto, ancho, los mostramos como bloque, que sean mayúsculas, un tamaño de texto, márgenes, padding, color de texto y en background mostramos la imagen sin repetir se mostrar el lado de arriba del el lado izquierdo, en la imagen es el ítem que no tiene dibujo ni logo, esta será su fondo en el estado normal del ítem del menú y como esta imagen tiene una línea transparente mostrara el background-color que es un azul muy profundo. Ahora vamos a dar los estilos a cada ítem en particular, y nos referimos a ellos por medio de la clase que le hemos asignado individualmente.

Como comente anteriormente, con estos estilos damos un trato especial a cada ítem individualmente por medio de cada clase en el estado Hover del enlace, es decir cuando el mouse este sobre él. Cambiamos para cada uno el color del texto el color del background también cambia, que es el que se ve por la línea transparente de la imagen y por supuesto la imagen sprite.png, que cambia de posición de acuerdo a cada ítem, para así mostrar la respectiva imagen, lo que hacemos es cambiar su posición en y es decir su altura y la posición x será siempre 0. Así logramos este simple pero simpático menú. El uso de CSS sprites es muy conveniente para mejorar el rendimiento de un sitio. Es por esto que los sitios con mayores lo usan: Google , Facebook o YouTube, cuanto mas nosotros.

Nos vemos en otro tutosytips

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

1 Respuesta

  1. Truly no matter if someone doesn’t understand afterward its up to other people that they will help, so here it occurs.