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>REFERENCIAS:css.devillasbuenas.es
:) Muy divertido, precisamente hace unas semanas publiqué unas parecidas, pero claro, no tan vistosas, utilizando claro, tu misma referencia.
ResponderBorrarEs un placer pasearme por tu sitio.
Saludos.
jajaja genial!
ResponderBorrarPues 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....
ResponderBorrarSaludos.
nice effect hover master :)
ResponderBorrarJosep: Los efectos de transición funcionan en Firefox versión 4 o superior así que, sólo es cosa de actualizarlo.
ResponderBorrarJajajaja... ¡touché, JMiur!
ResponderBorrarYa me hacía el remolón para actualizarme, pero ha valido la pena por ver esos giraldinos menús... :-)
Saludos.
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
ResponderBorrardonde se pone ese codigo?? dentro de plantilla?? o se agrega ub gadget?
ResponderBorrarDonde quieras usarlo, es indistinto.
ResponderBorrar