domingo, 8 de junio de 2014

Un menú de ejemplo



1. Objetivo

Vamos a crear un menú simple compuesto de iconos. Al pasar el ratón por encima de esos vínculos, las imágenes se ampliarán, al mismo tiempo que girarán ligeramente y que mostrarán una deformación horizontal.


2. La estructura del menú

El menú utilizará la clásica lista ul:

<ul id="menu">
<li><a href="#"><img src="twitter.png" alt="twitter" />
</a></li>
<li><a href="#"><img src="facebook.jpg" alt="facebook" />
</a></li>
<li><a href="#"><img src="flickr.png" alt="flickr" />
</a></li>
</ul>


3. El diseño

Los elementos li presentarán los estilos de diseño "habituales":

#menu li {
list-style: none;
display: inline-block;
margin-right: 20px;
}

Cada imagen (img) se transformará cuando se pase el cursor por encima del vínculo (a:hover). Se le aplicará un cambio de escala (scale), una rotación (rotation) y un desplazamiento (translate).

#menu li a:hover img {
-moz-transform: scale(1.1) rotate(3deg) translateX(2px);
-webkit-transform: scale(1.1) rotate(3deg) translateX(2px);
-o-transform: scale(1.1) rotate(3deg) translateX(2px);
transform: scale(1.1) rotate(3deg) translateX(2px);
}


4. El resultado visual:

Esta sería la visualización inicialmente:


Esta sería la visualización cuando se pase el cursor por encima de la imagen:



Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada