Cargando..

Menú con efecto solo utilizando CSS

Enviar e-mail 0

Este es un sencillo pero vistoso menu, creado utilizando solo CSS, que explicamos en ANANKE, nuestro blog de diseños y tutoriales, y que os brindo aquí también, para aquellos que no conociais ANANKE.
ENLACE 1 ENLACE 2 ENLACE 3 ENLACE 4


Para crearlo solo deveremos utilizar los estilos, pero tendremos en cuenta, que segun el navegador que se utilice, el efecto puede aparecer con algunas diferencias, mientras que se vera perfecto en Chrome o FireFox, y bien en Opera, en otros como Explorer simplemente será un efecto más.

El codigo que devemos utilizar es el siguiente:

<style>

.ananke {
background-color:rgba(0, 195, 255, 0.3);
border: 1px solid #f85f0;
display: block;
margin: 5px auto;
padding: 2px 5px;
text-align: center;
width: 200px;
-webkit-border-radius: 2px;
-moz-transition: all 0.1s ease-in-out;
-moz-border-radius: 2px;
-webkit-transition: all 0.1s ease-in-out;
}


.ananke:hover {
background: #fca528;
border-color: #FFF;
-moz-border-radius: 10px;
-moz-box-shadow: 0 0 20px red;
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-webkit-box-shadow: 0 0 20px red;
-webkit-border-radius: 10px;
}

</style>


Y los enlaces los pondremos de la siguiente manera:

<a href="Referencia al destino 1" class="ananke">ENLACE 1</a>
<a href="Referencia al destino 2" class="ananke">ENLACE 2</a>
<a href="Referencia al destino 3" class="ananke">ENLACE 3</a>
<a href="Referencia al destino 4" class="ananke">ENLACE 4</a>


Donde pone Referencia al destino, pondremos la dirección de enlace y en ENLACE, el titulo o palabra que queramos mostrar.

Deja tu comentario

comparte:

Digg Del.icio.us StumbleUpon Reddit Twitter Facebook Buzz RSS

Publica tu comentario en DR.T