La diferencia entre un buen diseño y un diseño genial puede estar en pequeños detalles que proporcionen mayor riqueza visual, como los menús animados realizados habitualmente en Adobe Flash. Como no soy amigo del Flash (*insertar aquí delirio sobre porqué los desarrolladores serios odiamos flash*), voy a mostraros cómo hacer un menú similar al que tenemos en la cabecera de esta web usando CSS Sprites y javascript (jQuery).
Preparando las imágenes
En primer lugar montaremos los tres estados del botón (normal, hover y activo) en un sprite tal que así:
La técnica de sprites consiste en utilizar una única imagen para todos los casos, mostrando sólo la parte que nos interesa mediante la propiedad background-position. La altura de la imagen es de 30px, de manera que para mostrar cada bloque cambiaremos la posición vertical del fondo a 0, 30px o 60px según el fragmento.
Leer el resto de la entrada »