CSS3 ha introducido innumerables posibilidades para los diseñadores, y lo mejor esto es que las opciones más atractivas son realmente fáciles de implementar.
Aquí hay 7 efectos muy simples que agregarán vida a tu interfaz de usuario web y una mejor experiencia a los visitantes de tus sitios.
Sólo un par de líneas de código le dará un efecto de transición impresionante que hará las delicias de sus usuarios, aumentará la participación y en última instancia, aumentará tus conversiones.
Todos estos efectos se controlan con la propiedad de transición.
Así que para poder ver estos efectos trabajando, vamos a establecer un div en una página HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div></div>
</body>
</html>
Una vez hecho esto, ajustaremos su ancho y alto, su color de fondo (gris) y su propiedad de transición.
<style type="text/css">
body > div
{
width:483px;
height:298px;
background:#676470;
transition:all 0.3s ease;
}
</style>
La propiedad de transición tiene tres valores:
– las propiedades de la transición (en nuestro caso todos ellos)
– la velocidad de la transición (en nuestro caso 0,3 segundos)
– un tercer valor que permite cambiar cómo se calcula la aceleración y desaceleración, pero dejaremos en blanco optando por la opción de default.
Ahora todo lo que tenemos que hacer es cambiar las propiedades…
FADE IN
Hacer elementos que se desvanecen en una petición bastante común de los clientes. Es una gran manera de hacer hincapié en la funcionalidad o llamar la atención a una llamada a la acción.
El efecto de “Fade in” se codifica en dos pasos: primero, se establece el estado inicial; y luego, se establece el cambio, por ejemplo, cuando se pasa el mouse por encima (hover):
.fade
{
opacity:0.5;
}
.fade:hover
{
opacity:1;
}
(Asegúrate de aplicar la clase «fade» en el div)
CAMBIO DE COLOR
Simplemente establecemos la clase del div en «color» y especificamos el color que queremos en nuestro CSS:
.color:hover
{
background:#53a7ea;
}
AGRANDAR Y ACHICAR
Para hacer crecer un elemento, solía tener que utilizarse su anchura y altura, o su relleno. Pero ahora podemos usar la propiedad de transformación de CSS3 para escalar elementos.
Coloca la clase «grow» a tu div y luego añadir este código a su bloque de estilo:
.grow:hover
{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
El achicado de un elemento es tan simple como hacerlo crecer. Para ampliar un elemento especificamos un valor superior a 1, y para reducirlo, se especifica un valor inferior a 1.
Todo esto dentro, en este caso, de la clase “shrink” que debes aplicarle a elemento:
.shrink:hover
{
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
ROTAR ELEMENTOS
Las transformaciones CSS3 tienen un número de diferentes usos, y uno de los mejores es la rotación de un elemento. Dele a tu div la clase «rotate » y añade el siguiente CSS:
.rotate :hover
{
-webkit-transform:rotateZ (-30deg);
-ms-transform:rotateZ (-30deg);
transform:rotateZ (-30deg);
}
CAMBIO DE FORMA
Un efecto muy popular es la transición de un elemento cuadrado en uno redondo, y viceversa.
Dale a tu div la clase «circle» y añade este CSS para su estilo:
.circle : hover
{
border-radius : 50% ;
}
SOMBRA 3D
Las sombras 3D fueron mal vistas por mas de un año, porque no eran compatibles con el diseño plano, pero ahora podemos lograrlas con CSS3.
Este efecto se consigue mediante la adición de la propiedad “box-shadow”, y luego moviendo el elemento en el eje x utilizando las transformaciones con su opción de “translacion”.
Dale a tu div la clase «threed» y luego añade el siguiente código a tu CSS:
.threed:hover
{
box-shadow:
1px 1px #53a7ea,
2px 2px #53a7ea,
3px 3px #53a7ea;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
OSCILACION
No todos los elementos utilizan la propiedad de transición. También podemos crear animaciones de alta complejidad utilizando keyframes, animación e iteración.
En este caso, vamos a definir en primer lugar una animación CSS en sus estilos.
Debido a cuestiones de aplicación, tenemos que usar “@-webkit-keyframes”, así como “@keyframes”:
@-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);
}
}
Esta animación simplemente mueve el elemento de izquierda y derecha, ahora todo lo que tenemos que hacer es aplicarlo y para eso lo colocamos en una clase “swing” y la aplicamos a nuestro elemento:
.swing:hover
{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
