CSS3 ha introducido innumerables posibilidades para los diseñadores de UX, y lo mejor de ellos es que las partes más geniales son realmente simples de implementar.
Solo un par de líneas de código le brindarán un efecto de transición asombroso que entusiasmará a sus usuarios, aumentará la participación y, en última instancia, cuando se utilice bien, aumentará sus conversiones. Además, estos efectos son acelerados por hardware y una mejora progresiva que puede usar en este momento.
Aquí hay 8 efectos realmente simples que agregarán vida a su interfaz de usuario y sonrisas a las caras de sus usuarios.
Todos estos efectos (barra uno) se controlan con la propiedad de transición. Para que podamos ver que estos efectos funcionan, configuraremos un div en una página HTML:
Una vez hecho esto, configure su ancho y alto (para que tenga dimensiones), su color de fondo (para que podamos verlo) y su propiedad de transición.
La propiedad de transición tiene tres valores: las propiedades para la transición (en nuestro caso todas) la velocidad de la transición (en nuestro caso 0.3 segundos) y un tercer valor que le permite cambiar cómo se calcula la aceleración y la desaceleración, pero nosotros ' Mantendré el valor predeterminado dejándolo en blanco.
Ahora todo lo que tenemos que hacer es cambiar las propiedades, y nos animarán ...
Si desea seguir, puede descarga los archivos de demostración aquí.
Tener las cosas desvanecerse es una solicitud bastante común de los clientes. Es una excelente manera de enfatizar la funcionalidad o llamar la atención sobre un llamado a la acción.
Los efectos de fundido se codifican en dos pasos: primero, establece el estado inicial; a continuación, establece el cambio, por ejemplo, en el vuelo estacionario:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Asegúrate de configurar la clase de tu div para que se "desvanezca" para ver si funciona).
Para hacer crecer un elemento, solía tener que usar su ancho y alto, o su relleno. Pero ahora podemos usar la transformación de CSS3 para agrandarla.
Establezca su clase de div para "crecer" y luego agregue este código a su bloque de estilo:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}Las transformaciones CSS tienen diferentes usos, y una de las mejores es transformar la rotación de un elemento. Dale a tu div la clase "rotar" y agrega lo siguiente a tu CSS:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}Las sombras 3D fueron mal vistas durante un año más o menos, porque no se consideraban compatibles con el diseño plano, lo que por supuesto no tiene sentido, funcionan fantásticamente bien para dar feedback al usuario sobre sus interacciones y trabajar con interfaces tridimensionales planas o falsas. .
Este efecto se logra agregando una sombra de cuadro y luego moviendo el elemento en el eje x utilizando las propiedades de transformación y traducción para que parezca crecer fuera de la pantalla.
Dale a tu div la clase "threed" y luego agrega 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);}Uno de los estilos de botones más populares en este momento es el botón fantasma; un botón sin fondo y un borde pesado. Por supuesto, podemos agregar un borde a un elemento simplemente, pero eso cambiará la posición del elemento. Podríamos solucionar ese problema utilizando el tamaño de caja, pero una solución mucho más simple es la transición en un borde usando una sombra de cuadro insertada.
Dale a tu div el "borde" de la clase y agrega el siguiente CSS a tus estilos:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}