
Aprende cómo aplicar ocho efectos sencillos para tu página web. Siete de ellos se controlan gracias a la propiedad Transition. Las transiciones en CSS3 sirven para modificar el valor de una propiedad en un elemento HTML para que de un estado inicial se pase a otro final de una forma gradual y durante un tiempo determinado.
.
Para ello, tienes que crear un div dentro de una página HTML de la siguiente forma:
.
<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> <div class="cuadrado"></div> </body> </html> .
Tras esto y para que tenga unas dimensiones tienes que establecer el ancho, el alto, el color de fondo y cómo no, su propiedad de transición.
<style type="text/css"> .cuadrado { width:300px; height:250px; background:#FAB400; transition:all 0.3s; } </style>
Los valores de la propiedad transition son tres:
1.- las propiedas para la transición, que en este caso sería all.
2.- La velocidad de la transición (0,5 segundos)
3.- El cambio de la forma en cuanto a aceleración y desaceleración, que en este caso queda en blanco para hacer uso del valor predeterminado por defecto.
1. Cambiar de color
Pon la clase div en “color” y determina el color que hayas elegido en tu CSS:
.color:hover { background:#53a7ea; }
2. Aumentar o reducir
Pon la clase de su div a “grow” y después añade el código que te indicamos a tu bloque de estilos. Si quieres ampliar un elemento solo tienes que especificar un valor superior a 1:
.grow:hover { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }
En nuestro ejemplo sería:
<div class="grow cuadrado"></div>
Para reducirlo, deberás realizar la operación inversa: especificar un valor inferior a 1:
.shrink:hover { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }
En nuestro ejemplo sería:
<div class="shrink cuadrado"></div>
3. Rotación de elementos
Para rotar un elemento pon en tu div la clase “rotate” y añade el siguiente CSS:
.rotate:hover { -webkit-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); transform: rotateZ(-30deg); }
En nuestro ejemplo sería:
<div class="rotate cuadrado"></div>
4. Disolver (fade in)
Pon en la clase del div “fade”. Para disolver un elemento es necesario hacerlo en dos partes. Primero tienes que establecer su estado inicial, y a continuación, el cambio:
.fade { opacity:0.5; } .fade:hover { opacity:1; }
En nuestro ejemplo sería:
<div class="fade cuadrado"></div>
5. Inset Border
Establece en tu div la clase “border” y agrega lo siguiente a tus estilos:
.border:hover { box-shadow: inset 0 0 0 25px #003666; }
En nuestro ejemplo sería:
<div class="border cuadrado"></div>
6. Sombreado en 3D
Para crear una sombra en 3D primero tienes que añadir una caja de sobra para después mover dicho elemento usando las propiedades transform y translate en el eje x para que así de la sensación de crecer fuera de la pantalla.
Dale a tu div la clase “threed” y añade a tus estilos este código CSS:
.threed:hover { box-shadow: 1px 1px #003666, 2px 2px #003666, 3px 3px #003666; -webkit-transform: translateX(-3px); transform: translateX(-3px); }
En nuestro ejemplo sería:
<div class="threed cuadrado"></div>
7. De cuadrado a círculo
Tan simple como darle a tu div la clase “circle” y añadir este CSS a tus estilos:
.circle:hover { border-radius:50%; }
En nuestro ejemplo sería:
<div class="circle cuadrado"></div>
8. Balanceo (swing)
Este último elemento no utiliza la propiedad de transition. Es una animación bastante más compleja ya que hace uso de @keyframes, animation y animation-iteration. Primero tienes que añadir en los estilos de tu CSS:
@-webkit-keyframes swing { 15% { -webkit-transform: translateX(5px); transform: translateX(5px); } 30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 50% { -webkit-transform: translateX(3px); transform: translateX(3px); } 65% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes swing { 15% { -webkit-transform: translateX(5px); transform: translateX(5px); } 30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 50% { -webkit-transform: translateX(3px); transform: translateX(3px); } 65% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } }
Con esta animación solo mueves el elemento de izquierda a derecha, lo único que tienes que hacer a continuación, es aplicarlo
.swing:hover { -webkit-animation: swing 1s ease; animation: swing 1s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }
En nuestro ejemplo sería:
<div class="swing cuadrado"></div>
Puedes probar las transiciones en CSS3 con tus propios elementos en http://jsfiddle.net. ¿Te han gustado estos trucos? Si es así, deja un comentario o búscanos en Twitter o en Facebook.
Deja un comentario