JMiur [E]

Sólo un ejemplo más de las posibilidades que brinda el CSS3 y las transiciones para crear menús animados:
<style type="text/css">
  #menucircle { margin-left:50px; }
  a.menucircle {
    background-image: -moz-linear-gradient(100% 100% 90deg, #ABC, #456);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#ABC), to(#456));
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF445566', EndColorStr='#FFAABBCC');
    background-color: #000;
    -moz-transition-duration: 3s;
    -webkit-transition-duration: 3s;
    -o-transition-duration: 3s;
    transition-duration: 3s;
    border-radius: 10px;
    color: #FFF !important;
    display: block;
    float:left;
    font-family: Helvetica;
    font-size:30px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    text-decoration: none;
    margin: 0 10px;
    width: 150px;
  }
  a.menucircle:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transition-duration: .4s;
    -webkit-transition-duration: .4s;
    -o-transition-duration: .4s;
    transition-duration: .4s;
    background-image: -moz-linear-gradient(100% 100% 90deg, #DEF, #567);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#DEF), to(#567));
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF556677', EndColorStr='#FFDDEEFF');
    color: #FF0;
}
</style>

<div id="menucircle">
  <a class="menucircle" href="#">ejemplo</a>
  <!-- otros enlaces -->
</div>

9 comentarios:

Pliactom  

:) Muy divertido, precisamente hace unas semanas publiqué unas parecidas, pero claro, no tan vistosas, utilizando claro, tu misma referencia.

Es un placer pasearme por tu sitio.

Saludos.

Responder
Unknown  

jajaja genial!

Responder
Josep Lloret Bosch  

Pues parece que el efecto no funciona con Firefox 3.6.17 corriendo en Kubuntu porque al clickar en cualquier elemento únicamente el cursor vuelve al inicio de la página....

Saludos.

Responder
Beben Koben  

nice effect hover master :)

Responder
JMiur  

Josep: Los efectos de transición funcionan en Firefox versión 4 o superior así que, sólo es cosa de actualizarlo.

Responder
Josep Lloret Bosch  

Jajajaja... ¡touché, JMiur!

Ya me hacía el remolón para actualizarme, pero ha valido la pena por ver esos giraldinos menús... :-)

Saludos.

Responder
JMiur  

No se arrepentirá, Josep. Es buena actualización y mejora mucho la performance del navegador aparte de dejarnos jugar un poco con estas cosas que se mueven :D

Responder
Anónimo  

donde se pone ese codigo?? dentro de plantilla?? o se agrega ub gadget?

Responder
JMiur  

Donde quieras usarlo, es indistinto.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR