martes, 17 de mayo de 2011

Vagabundia

Vagabundia


Girando menús

Posted: 16 May 2011 08:00 PM PDT

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>

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog