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;
}
Descarga AQUI debajo todos los códigos de ejemplo para usarlos directamente en tus páginas:
[sociallocker]
** Descargar ejemplos **
[/sociallocker]
Espero que estos efectos te hayan gustado, te animo a que los pruebes cambiando sus valores y viendo el resultado.
¿Te gustaría entrar en el mundo del diseño web?
Te recomiendo…
Excelente aporte, mil gracias por compartir su conocimiento.
Vale la pena emplearlo.
Por nada Armando!
Excelente post, claro, explicado, cuidando el grado de dificultad (incremental) para formentar su entendimiento para quienes comienzan con el tema.
Saludos y felicitaciones.
Plácido Luna.
Gracias Plácido!
Y para los menus…como se trabaja….en su despliegue….hay uno solo o existen varios……
Hola.
HAce muchísimos años que dejé todo lo relacionado con el mundo web y seguí con diseño gráfico.
En lo que respecta a animaciones, ¿existe algún listado para este tipo de cosas que enseñas en el artículo que CSS3 permite hacer?
Por necesidad me he puesto a probar con bootstrap para crear algo sencillo para mi portfolio y tal vez vea algo interesante que aplicar una vez que sepa qué opciones hay disponibles como esta de la que hablas que parece bastante sencillo de implementar.
Saludos y gracias, Cristian.
Christian (jeje, qué casualidad)
Hola Chris
Utiliza el buscador de arriba a la derecha, coloca alli lo que quieres buscar y te lista todos los articulos.
Saludos!
Ya viste el curso de Bootstrap??: Curso Bootstrap
Excelente me encantaron!! Gracias por compartirlos
Excelente Material para aplicaciones y comsultas..!
Si un a peuqeña correción el la transformación rotate ,..que funcionó despué de cambiar la palabra
rotateZ en el código de la clase : rotate ,..es decir…
.rotate:hover
{
-webkit-transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
transform:rotate(-30deg);
}
Además fije la posición del cuadro en un lugar diferente para apreciar mejor el efecto de rotación con el ID:
#him {position: absolute; top: 120px;left: 200px}
y Este es el Código COMPLETO Para comprobar este ejemplo..!
body > div
{
width:483px;
height:298px;
background:#676470;
transition:all 0.3s ease;
}
.rotate:hover
{
-webkit-transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
transform:rotate(-30deg);
}
#him {position: absolute; top: 120px;left: 200px}
Cordiales Saludos..1
Atte.:Bruno A. Savron.
porque no me funciona
o sera que tengo que instalar algun package