En css cada vez que descubro un truco nuevo es como encontrar un caramelo. 
Este truco en particular es de los buenos. Consiste en hacer los rollovers de los menus sin necesidad de recortar cada uno de los botones, en estados normal y over, con fireworks o photoshop y sin tener que usar javascript o hacer un preload de las imágenes. Ya te puedes imaginar la de codigo spagheti que te puedes ahorrar aquí.
En css se puede poner fondos a los elementos. Además estos fondos solo se muestran en la ventana de dimensiones iguales al el elemento que hemos escogido. Si tenemos una serie de elementos jerarquizados podemos ponerle un fondo a cada uno de esos elementos con la ventaja añadida de que a medida que se profundiza en la jerarquía se van solapando los fondos. Esta posibilidad se utiliza en otros trucos para conseguir esquinas las redondas y sombras.
Diseña tus botones en tu editor gráfico favorito, poniendo la imagen del over debajo de las imágenes del estado normal. Un ejemplo de un navbar sería este:
En nuestro html creamos una lista con los enlaces de nuestros botones así:
El que pongo al rededor del texto de los enlaces es para otro truco que utilizo aquí para ocultar el texto del link. Así solo veremos el gráfico que es lo que queremos usar.
#primary span{
display:none;
}
El CSS
Aquí cogemos nuestra lista al que le hemos dado id #primary y la utilizamos para dar las dimensiones de nuestra barra de navegación, quitar los bullets y dar las posiciones de comienzo de los enlaces.
Posicionando los enlaces
#primary1 {left: 0; width: 90px;}
#primary2 {left: 97px; width: 55px;}
#primary3 {left: 159px; width: 64px;}
#primary4 {left: 230px; width: 77px;}
#primary5 {left: 314px; width: 97px;}
Utilizando los id de los enlaces, posicionamos cada uno. Desde la izquierda contamos la posicion x del boton de cada link. El ancho es el ancho de cada botón.
Los hovers
#primary1 a:hover {background: transparent url(../images/botonera.png) 0 -30px no-repeat;}
#primary2 a:hover {background: transparent url(../images/botonera.png) -97px -30px no-repeat;}
#primary3 a:hover {background: transparent url(../images/botonera.png) -159px -30px no-repeat;}
#primary4 a:hover {background: transparent url(../images/botonera.png) -230px -30px no-repeat;}
#primary5 a:hover {background: transparent url(../images/botonera.png) -314px -30px no-repeat;}
La explicación de los valores que damos de posicion a la imagen de fondo es la siguiente. La de altura es porque necesitamos mover la visión 30 pixels más abajo, teniendo en cuenta las coordenadas web eso sería desde 0 30px negativos en nuestro caso que es la mitad de nuestra imagen maestra de 60.
La otra posición se explica teniendo en cuenta que la posición de cada enlace es 0. Como es cero para empezar necesitamos mover la imagen hacia atrás, creando un offset, en el mismo número de pixels que su anchura más la anchura de todos los botones que la preceden. Eso coincide exactamente con los valores que calculamos anteriormente para la posición de cada botón, solo que esta vez le ponemos un signo negativo.
Y el resultado final lo podeis ver aquí
Este truco original lo descubrí en Alistapart.com, como no
Entradas (RSS)
Mu chuli
En mi blog hay uno de esos, jejeje.
Tu menu no parece de esos. Al menos no parece que necesite gráficos con el estilo que elegiste.:cool: Utiliza el truco de quitar los bullets con list-style:none; y poner todos los elementos de la lista en línea con el display: block;
Para mi este truco permite hacer botones gráficos casi tan ligeros como los tuyos pero con todas las ventajas del anti-alising y la variedad fuentes que puedes utilizar.
Uhm me lo apunto para mi próximo diseño
Ahhh coño, pensé que no eran gráficos, los ví de pasada y pensé que eran coloreados y usando el moz–border