🖖 Inicio

SERVICIOS

Salir

nochedía

Gradientes por css

1300 palabras
5 minutos
May 12, 2020

Gradientes por css

Los gradientes por css son extraordinariamente potentes en el sentido de que es el propio navegador el que nos renderizará estas imágenes, algo para lo que hace no tantos años necesitábamos un programa de edición al uso

Además, tienes en www.kuworking.com/css-gradients una pequeña herramienta para generar gradientes (binarios) aleatorios, y muchas veces esto es lo que necesitamos para encontrar una combinación que nos guste

El problema es que estos gradientes son inamovibles

Qué quiere decir esto? Que no podremos aplicar ningún hover con transiciones

Y con animaciones? No podemos hacerlo con animaciones?

Es complicado, las transiciones se terminan automáticamente cuando el usuario deja de estar donde estaba (mueve el cursor fuera del hover, lo que sea)

En animaciones esto no es así y aunque el usuario se mueva la animación tiene que terminar, y si el usuario vuelve a entrar estará accionando una nueva animación antes de que la previa haya terminado ...

Caos, muerte y destrucción

Con lo que IMO no es buena idea, al menos no sin controlar estas posibles y probables interacciones, es decir, JavaScript, con lo que ya todo se vuelve demasiado complejo para lo que es una simple transición

Recuerda que el contenido es lo que convierte, el continente tiene que acompañar y sobre todo no molestar, cuando el continente demanda demasiados recursos no vamos bien

Con excepciones, claro, y además cada cual tiene sus objetivos, pero al menos para mi es una norma que se cumple la mayoría de las veces

Pero aquí no se trata de hacer transiciones, aquí queremos hacer animaciones sin interacción de usuario, simplemente para conseguir una estética que nos puede ayudar a seducir y persuadir

Simple css

La manera más rápida y simple de tener una gradación constante y dinámica es vía css y podría ser esta (en index.js)

Y listos, se trata de un panel 4 veces más grande que nuestro viewport y que al moverlo nos da la impresión de que estamos cambiando el gradiente

Brillante y tremendamente barato, pero cuando acostumbras la vista es verdad que terminas detectando que es un panel que va oscilando

Importa? No, a no ser que lo pongas como elemento principal y esperas que tu visitante pase tiempo allí, entonces quizá sí importe

Vamos a ver exáctamente qué hemos hecho

Primero, expandimos el <div> para que ocupe toda la pantalla

Por qué no poner todos en porcentaje?

Fácil, 100% se refiere al porcentaje del elemento superior, y en el caso de height este elemento superior no tiene esa propiedad

En otras palabras, tiene 0 px, con lo que un 100% de 0 es 0 (si lo pones verás que te desaparece el div)

Cuando pongo 100vh estoy utilizando unidades viewport y le estoy diciendo que ese div tendrá un height equivalente al 100% del viewport

Y viewport es igual a lo que se ve en la pantalla

Y entonces, por qué no ponerlo todo en viewports?

Por una razón, el viewport es la pantalla, y esto incluye los scrollbars

Si nuestro website es largo, lo suficiente como para generar un scroll vertical, entonces si ponemos un width: 100vw estaremos definiendo un width mayor que lo que vemos en pantalla (lo que vendría a ser el <html> o el <body>)

Y qué pasará?

Pues que estaremos generando un scroll horizontal (vade retro satanás!)

La pregunta entonces es, pero si pongo un width: 100% no tendré el mismo problema que con el height? Es decir, que mi elemento padre tiene un width de 0?

La pregunta es muy relevante, y la respuesta es no

Por qué?

Porque al ser un <div> éste tiene por defecto la propiedad display: block, y esta propiedad define un width del 100%

Explicado esto, ya lo tenemos, combinamos viewports y porcentajes como hacemos en el código y perfecto

Qué más hacemos?

Aquí definimos el tamaño del lienzo, con un 400% hay tiempo para moverlo y que de la sensación de estar cambiando (en lugar de moviéndose)

Y antes definimos el gradiente lineal, con un primer argumento que indica el ángulo, y después una serie de colores que representan los distintos puntos

Este código es equivalente al siguiente

Es decir, si tenemos un gradiente de 5 puntos, estos se distribuirán de forma equidistante en porcentajes

Y esto quiere decir que podemos modificar los porcentajes si así lo preferimos

Cuanta menos distancia haya entre los colores más rápida irá la animación

Del mismo modo, puedes aumentar la distancia aumentando el tamaño del div

O para afectar la velocidad puedes tocar directamente la animación

Animaciones

Las animaciones constan de 2 momentos

  1. Definimos como se anima

Con el nombre que queramos, aquí gradientBG, la duración, el tipo de movimiento y si queremos que haya un loop infinito pues con infinite

El tipo de movimiento se defina con curvas bezier pero la mayoría de veces nos bastará y sobrará con las que están predefinidas, como ease

Las puedes ver aquí (y así queda claro de qué estamos hablando)

image

O si quieres curvas algo más sofisticadas puedes utilizar las de easings.net)

Para lo que nos ocupa, que es que no queremos que se detecte ningún movimiento ya que intentamos recrear la ilusión de que los colores cambian (y no se mueven), con ease ya vamos bien

  1. Definimos la animación

Con la palabra clave @keyframes y seguido del nombre que antes hemos puesto

Luego definimos los porcentajes de la animación que nos parezcan, fíjate que aquí el 0% y el 100% son iguales, esto nos permitirá hacer un loop infinito sin que se perciba el inicio y final de la animación

Y lo que hacemos es cambiar la posición del background, donde establecemos la x y la y

Aquí por lo tanto estaremos siempre moviéndonos en el eje de las x

Para variar, podemos simular un sol que aparece lentamente utilizando radial-gradient

Aquí le estamos definiendo un círculo que termine cuando toque su lado más cercano (con closest-side), y luego utilizamos los colores indicados

Para ver a qué me refiero con esto del closest-side tienes la siguiente imagen, en un caso el gradiente se termina cuando toca el lado más cercano, en el otro cuando toca el lado más lejano farthest-side

image

En el código de arriba lo he situado en las posiciones x y y del 5%, y ahora para verlo aparecer necesito modificar la animación de este modo

Por último amplio la animación a 1000 segundos y así tengo una animación que seguramente superará el tiempo de visita de mi usuario por lo que no llegará nunca al keyframe del 50%

Pero si llega lo único que pasará es que verá el círculo retroceder por donde ha venido, nada dramático

En este caso estoy buscando un movimiento, a diferencia de antes no intento crear una ilusión de cambio

Ahora sigo con los gradientes como tales, pero así puedes ver el potencial del css para generar todo tipo de animaciones, y las animaciones son sólo estrategias para generar emociones a nuestros visitantes, y es que con las emociones se convierte mucho mejor

No dejamos aún el sol que aparece, pues puestos a crear emociones, vamos a añadir una imagen

De este modo tenemos a dos <div> superpuestos que mezclamos con mix-blend-mode, del cual tenemos diversas opciones

Te recomiendo que las investigues con Chrome Developer Tools y allí directamente edites esta propiedad, al saltar de valor en valor podrás ver el efecto que tiene cada opción

Pero quizá queremos darle otro filtro para acentuar más la sensación de amanecer, podemos añadir a la foto un gradiente linear rojizo y hacer lo mismo que aquí, mezclarlos, pero como estaremos en el mismo div utilizaremos el equivalente de mix-blend-mode que es el background-blend-mode

Con esto conseguimos alterar la imagen de unsplash con un filtro que simula el amanecer, más una animación que simula un sol que muy lentamente va haciendo acto de presencia

background-blend-mode se utiliza para mezclar background-image que esten en una misma instrucción

Si se quiere mezclar <div> distintos se utiliza mix-blend-mode

Puedes verlo aquí, he puesto la animación a 50 segundos para se aprecie más fácilmente

Bien, y siempre podemos volver a la animación del principio pero manteniendo la imagen y quitándole el filtro rollo amanecer

Capítulo terminado y ya sabemos cómo simular el cambio de gradientes con css, una ilusión muy efectiva y que nos permite implementarlo de forma muy rápida y cómoda

Pero no todo termina en el css, en el próximo capítulo lo vemos con JavaScript, en Gradientes con JavaScript

Qué tal este capítulo?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]