JMiur [E]

Este es un ejemplo de transiones que se aplican de modo diferente cuando colocamos el cursor encima del botón y cuando lo quitamos con lo que se genera una animación sin necesdad de utilizar JavaScript.

El concepto es simple y puede ser aplicado a cualquier elemento, basta poner un tipo de transición en la regla de estilo del enlace y otra en la del efecto hover:
#ejemplo {
  border-radius: 5px;
  padding: 10px;
  -moz-transition: padding 2s;
  -webkit-transition: padding 2s;
  -o-transition: padding 2s;
}
#ejemplo:hover {
  border-radius: 15px;
  padding: 20px;
  -moz-transition: border-radius 2s;
  -webkit-transition: border-radius 2s;
  -o-transition: border-radius 2s;
}



Usando esta idea, en css-tricks.com lo han llevado hasta el ímite, generando un código no apto para quienes les gustan las cosas simples:

<style>
  #buttonwrap {
    margin: 0 auto;
    text-align: center;
    width: 600px;
  }
  #button {
    -moz-transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -moz-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;
    -webkit-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;
    -o-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box; 
    background-image: -moz-linear-gradient(center top , #5BE93A, #278312);
    -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(1, #278312));
    border: 5px solid #AEFBAE;
    border-radius: 25px;
    color: #FFF;
    display: block;
    font-family: Tahoma;
    font-size: 60px;
    font-weight: 300;
    margin: 80px auto;
    padding: 60px 15px;
    position: relative;
    text-decoration: none;
    text-shadow: 5px 3px 1px rgba(0, 0, 0, 0.5);
    width: 150px;
    z-index: 1;
  }
  #button:hover {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transition: padding 0.2s ease 0s, top 0.2s ease 0s;
    -webkit-transition: padding 0.2s ease 0s, top 0.2s ease 0s;
    -o-transition: padding 0.2s ease 0s, top 0.2s ease 0s;
    background-image: -moz-linear-gradient(center top , #5BE93A, #5BE93A, #278312);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(0.2, #5be93a),color-stop(1, #278312));
    padding: 70px 30px;
    top: -10px;
  }
  #button:after {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }
  #button:before {
    -moz-transition: all 0.2s ease 0s;
    -wekit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    border-radius: 35px;
    bottom: -30px;
    box-shadow: 0 0 100px rgba(255, 255, 255, 0.1) inset;
    content: "";
    left: -30px;
    position: absolute;
    right: -30px;
    top: -30px;
    z-index: -2;
  }
  #button:hover:before {
    bottom: -20px;
    box-shadow: 0 0 100px rgba(255, 255, 255, 0.2) inset;
    left: -20px;
    right: -20px;
    top: -20px;
  }
  #button:active {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8) inset;
  }
</style>

<div id="buttonwrap">
  <a href="#" id="button">CSS3</a>
</div>

7 comentarios:

Gem@  

Hace unos años nadie hubiera imaginado el JavaScript iría quedando aparcado por las transiciones, al final veremos algunos efectos no aptos para cardiacos :D

Responder
Graciela  

Geniales :P

Responder
Alcion  

Es impresionante las cosas que pude llegar a hacer el ccs, aunque yo soy parte del grupo de los que les gustan las cosas simples voy a jugar un poco con el 2° codigo a ver que otras cosas se pueden lograr.

Responder
JMiur  

Se consiguen cosas raras ¿verdad? :D

Responder
NickJP!^xD  

JMiur a ver si usted me puede echar una mano en la siguiente duda que tengo y quiero agregar en mi blog...

la pregunta es que quiero un Botón que quede en estado activo despues de un click y cuando clickè al otro este se le quite al otro y se le active al dar click...

Ejemplo "link 1 Link 2" cuando precione link1 se le ponga un background cuando precione link2 se le quite al link1 y se le ponga al link2

Saludos.!

Responder
CUENTAGOTAS  

Jorge, estas cositas son geniales y usando un poco la creatividad se puede aplicar de muchas maneras, yo la voy a usar como boletín informativo junto a ligthwindow
:P.

Gracias por impartirnos tus conocimientos.

Responder
JMiur  

Suerte. A ver que sale con los experimenteos :D

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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