Páginas

17 mayo 2011

Girando menús

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:

  1. :) 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.

    ResponderBorrar
  2. 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.

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

    ResponderBorrar
  4. Jajajaja... ¡touché, JMiur!

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

    Saludos.

    ResponderBorrar
  5. 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

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

    ResponderBorrar
  7. Donde quieras usarlo, es indistinto.

    ResponderBorrar

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