16JulMenu al estilo de la página de MAC

Bien, lo cierto es que un día se me ocurrió ver cómo estaba hecho el menú de la página de mac, no usaba texto sino que los rótulos estaban hechos con imagen, y sin embargo se cargaba siempre de forma homogénea sin dar fogonazo blanco al susitituir la imagen en los efectos de rollover. Si bien es de lo más sencillo hacer un menu de este aspecto con css (puedes usar por ejemplo una imagen con los tres estados para cada botón)  me intrigaba ver como lo habían resuelto técnicamente. Para mi sorpresa lo habían hecho con una única imagen. No era muy difícil imaginar que se trataba de un ejercicio de uso de la propiedad background-position, variando en cada boton la colocación de una única imagen de fondo que contiene todos los estados del menú, es decir de todos los botones.

Os dejo aquí un ejemplo de cómo lo he implementado. Sencillo, fácil y que permite un gran control sobre el aspecto del mismo. Y podéis descargarlo en un rar aquí.


 

Febrero 2012
L M X J V S D
« May    
 12345
6789101112
13141516171819
20212223242526
272829