miércoles, 16 de febrero de 2011

Un menú con sprites - Vagabundia


Estos menús son una demostración práctica y muy original del uso de sprites para crear efectos.

Siempre se parte de lo mismo, el menú, es una lista:
<div class="navi1">
<ul>
<li class="sm1"><a href="URL_enlace1"></a></li>
<li class="sm2"><a href="URL_enlace2"></a></li>
<li class="sm3"><a href="URL_enlace3"></a></li>
<li class="sm4"><a href="URL_enlace4"></a></li>
<li class="sm5"><a href="URL_enlace5"></a></li>
</ul>
</div>


Pero, como se ve, no hay textos en los enlaces ya que todo el menú es una imagen transparente que tiene dos partes, la de arriba es la que vemos por defecto y la de abajo es la que vemos cuando el ratón se coloca encima

La clave es el CSS y usar la aritmética para calcular cada desplazamiento. No es mucho lo que puede explicarse del tema, hay que mirar y probar:


.navi1 {
display: block;
height: 72px;
margin:0 auto;
position: relative;
width: 525px;
}
.navi1 ul {
float: none;
list-style-image: none;
list-style-type: none;
margin: 3px 0;
}
.navi1 ul li {
height: 72px;
background-image: url(URL_imagen);
background-repeat: no-repeat;
float: left;
margin: 0px;
padding-top: 5px;
position: absolute;
}
.navi1 ul li a {
display: block;
height: 100%;
width: 100%;
}
.navi1 ul li.sm1 { background-position: 0px 0px; left: 0px; width: 125px; }
.navi1 ul li.sm2 { background-position: -125px 0px; left: 100px; width: 124px; }
.navi1 ul li.sm3 { background-position: -249px 0px; left: 200px; width: 124px; }
.navi1 ul li.sm4 { background-position: -373px 0px; left: 300px; width: 125px; }
.navi1 ul li.sm5 { background-position: -498px 0px; left: 400px; width: 126px; }
.navi1 ul li:hover { z-index: 1000; }
.navi1 ul li.sm1:hover { background-position: 0px -75px; }
.navi1 ul li.sm2:hover { background-position: -125px -75px; }
.navi1 ul li.sm3:hover { background-position: -249px -75px; }
.navi1 ul li.sm4:hover { background-position: -373px -75px; }
.navi1 ul li.sm5:hover { background-position: -498px -75px; }

Las otras variantes siguen el mismo criterio y todos los ejemplos pueden descargarse desde la web del autor.




REFERENCIAS:DeepuBalan






















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog