Ver el ejemplo terminado
La facilidad con la que se pueden diseñar distintos tipos de rollovers en CSS nos ha facilitado el trabajo, ya no es necesario incluir código javascript ni crear distintas imágenes para poder hacer un menú atractivo y prolijo, sin embargo, hasta el momento no he podido leer ningún artículo que trate del background-position en la creación de rollovers.
En este artículo – tutorial vamos a crear un menú que cambia de color cuando posamos el mouse sobre él (a:hover) y cuando lo presionamos (a:visited), con tan sólo un archivo de imagen.
La ventaja de este original menú consiste en su simplesa, pues con unas pocas líneas de código podemos crear un menú de un sólo botón web ó con tantos botones como quisieramos.
Creación de la Imagen
Lo primero es crear la imagen que escalaremos con el css, para esto utilizamos cualquier editor de imágenes.
Lo importante de la creación de este archivo es la delimitada alineación de las imagenes y el margen de unas con otras, debemos tomar nota de sus posiciones y tamaños, esto es muy importante pues con el css lo que haremos es escalar este archivo para mostrar sólo la parte de la imagen que nos interesa.
Para el ejemplo, estas son las medidas:
Ancho del Lienzo: 200px
Alto del Lienzo: 108px
Ancho de cada botón: 196px
Alto de cada botón: 32px
Borde de cada botón: 1px
Espacio superior, inferior, izquierdo, derecho y entre cada botón: 2px
Desde luego esto depende del gusto de cada uno.
Luego de haber diseñado el archivo lo exportamos como gif con fondo transparente.
Creación del Rollover con CSS
En que consiste nuestro diseño, primero en eliminar los estilos, márgenes y relleno propios de toda lista xhtml, luego definir cada item de la lista como bloque, pues sólo se puede determinar la posición de un background cuando se aplica a un bloque, y finalmente, aplicar el background-position del a:hover y del a:active, pues del a:link ya lo estamos limitando con el height y padding de cada item. El resto es simplemente definir el texto, lo que en realidad importa, como dije antes, es saber los píxeles de la imagen para poder escalarla.
/* Primero definimos el añcho de la capa, que debe ser del ancho del lienzo: */
#menu {
width: 170px;
margin: 50px;
}
/* Definimos el estilo nuestra lista */
#menu ul {
list-style: none;
margin: 0;
padding: 0;
font-family:Verdana,Arial, Helvetica, sans-serif;
font-size:0.8em;
font-weight: bolder;
}
/* Ahora las características comunes de cada item */
#menu li a {
text-decoration: none;
height: 28px;
display: block;
padding: 9px 0 0 24px;
background: url(botones.gif);
}
/* Ahora las caraterísticas especiales */
#menu li a:link, #menu li a:visited {
color: #777;
}
#menu li a:hover {
color: #257EB7;
background-position: 0 -36px;
}
#menu li a:active {
color: #fff;
background-position: 0 -72px;
}
Con esto ya esta creado nuestro menú vertical, fácil y simple, pero a la vez atractivo.
Y finalmente el HTML
Creamos la capa y la lista desordenada:
<div id=”menu”>
<ul>
<li><a href=”#” title=”Inicio”>Inicio</a></li>
<li><a href=”#” title=”Artículos”>Artículos</a></li>
<li><a href=”#” title=”Tutoriales”>Tutoriales</a></li>
</ul>
</div>
La lista podría aumentar todo lo que quisieramos y nuestra botonera seguiría manteniendo su mismo y prolijo aspecto.
Ver el ejemplo terminado
fuente: http://www.baluart.net
En este caso, para solucionar esto, tan solo deberemos hacer una modificación en el registro muy simple que nos permitirá ampliar el límite de estas sin que el programa acabe con un comportamiento no deseado.
Dejo la dirección para descargar de forma gratuita y en formato PDF el libro completo “Arte y Ciencia del Diseño Web” de Jeffrey Veen (versión en ingles).