martes, 2 de febrero de 2021

👨‍💻 Investigando sobre gradientes CSS | Parte 1 | Generalidades | Tipos

Aurora Boreal

Imagen introductoria:Aurora boreal

⏩ Snippet: ⏪
👉 Snippet: CSS me permite crear hermosos fondos con degradados (o gradientes de color) partiendo de un color a otro (u otros), dando una presentación espectacular al documento.
Portafolio de temas tratados en esta publicación:
IR A PORTAFOLIO
1.Conceptos básicos de inicio

El antes ....

Una funcionalidad que estaba siendo requerida en versiones anteriores de CSS era la referida a poder aplicar fondos con gradientes.

Y era porque en versiones anteriores a CSS3 era imposible hacer degradados desde código, por lo cual había que depender de imágenes.

¿Cómo olvidar lo que se tenía que hacer antes para tener un degradado de dos colores como fondo en nuestra web? Eran imágenes, que usábamos como background-image y listo. La imagen en cuestión, al tener tanta información de color, pesaba lo suyo, con la correspondiente llamada extra al servidor y descarga de unos (muchos) kbs extras. Nada bueno para para la experiencia de usuario.

El después ....

Hasta que llegó CSS3 con sus gradientes, que nos permite aplicar un degradado usando una sola línea en su declaración (o varias si necesitamos compatibilidad entre navegadores). Rápido y sobre todo muy ligero: decimos los colores al navegador y él solito se encarga de generar la transición y correspondiente degradado entre ambos colores. Genial. Ahora ya tenemos las herramientas para pasar nuestro degradado de fase de diseño a fase de maquetación.

No queda duda que la tercera versión de CSS (que llamamos CSS3) ha supuesto una revolución en muchos aspectos: nuevos selectores, nuevas propiedades, animaciones… pero también ha mejorado el rendimiento y velocidad de carga de muchas webs. Y los degradados son una de ellas, haciendo que hoy en día se haya superado limitaciones para aplicar degradados.

La buena noticia es que, hoy día, los desarrollos en CSS traen como resultado el que ahora sea sencillo y confiable crear degradados "desde el interior de nuestras hojas de estilo".

Definiendo el concepto ....

En su forma más simple, definimos a los degradados como imágenes de fondo, o lo que es lo mismo, un color inicial que se transforma poco a poco en uno o varios colores sucesivamente.

Los degradados CSS le permiten al autor (programador, diseñador, blogging) mostrar transiciones suaves entre dos o más colores especificados.

En CSS3 se introducen algunas expresiones relacionadas que harán esta tarea algo muy sencillo, pudiendo utilizarlas fácilmente mediante la propiedad background-image e indicando el tipo de gradiente deseado:

En consecuencia, eetablecemos la imagen de fondo (usar simplemente la abreviatura background es absolutamente adecuado) como un linear-gradient o un radial-gradient, luego enviamos los colores de inicio y fin del cuento, para lo cual aplicamos su sintaxis:

Sintaxis:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
  

En CSS se pueden definir varios tipos de degradados, los cuales se abordarán en lecciones separadas, y cuyos enlaces se suministran en adición a la lista descriptiva que se anexa de seguido:

La tabla que se adjunta a continuación, aporta un acercamiento inicial a esos conceptos básicos de los grafientes en CSS:

Propiedad Función de gradiente Significado
background-image linear-gradient(...) Define un gradiente lineal, en una dirección específica.
radial-gradient(...) Define un gradiente radial, en forma de círculo o elipse.
conic-gradient(...) Define un gradiente cónico, desde un punto de vista superior.

Tabla 1: Propiedad background-image / tipos

Sinopsis: debes tener claro entonces, para proseguir, no solamente lo que se entiende por degradado, sino que además se definen varios tipos, de manera que la ruta a seguir en el abordaje de este tema, transita por conocer y aplicar esos tipos de degradado, ... aplícate desde este momento, a replicar todos los contenidos que siguen: lée y aplica. Y, no perdamos tiempo, y vamos directo a la primera aplicación, obviamente, simple, para empezar.

Ejemplo. Antes de entrar en el detalle de cada tipo de degradado, veamos un caso sencillo que ejemplifica su funcionmiento, que permitirá comprender la posterior lectura de esta lección:

Degradado Lineal - De arriba a abajo

Este degradado lineal comienza de color azul en la parte superior, pasando a celeste en la parte inferior.



Imagen 1: Ejemplo simple de degradado



Sencillísimo,...¿cierto o falso?. Con conocimientos básicos previos de CSS y HTML, y aplicando la sintaxis, todo resulta "pan comido". Es la idea de esta lección: que compruebes lo fácil que resulta aplicar degradados.


Sigamos entonces. Para ello enfoquémonos en otros aspectos misceláneos, cuyo conocimiento previo, es requerido, para profundizar en los tipos de gradientes citados, y que tal cual se dijo, puedes consultarlo pinchando los enlaces suministrados.

IR A PORTAFOLIO
2.Dirección del gradiente

Empecemos por analizar un ejemplo:

div {
  background-image: linear-gradient(to right, blue, red);           /* Primer ejemplo */
  background-image: linear-gradient(to right, blue, yellow, red);   /* Segundo ejemplo */
}

Ahora visualizando:

Imagen 2 : Dos imágenes ilustrativas de gradientes

En el ejemplo visual anterior, la dirección del gradiente es horizontal (hacia la derecha). El primer ejemplo tiene sólo 2 colores (azul y rojo), mientras que el segundo tiene 3 colores (azul, amarillo y rojo). Ambos tienen como dirección una orientación hacia la derecha:

Como vemos, el primer parámetro utilizado fue to right, que es lo que indica la orientación del gradiente. En este parámetro se puede indicar tanto una palabra clave como un número de grados que represente la dirección:

Orientación de dirección

Imagen 3 : Orientación de la dirección


Para que quede aún más claro, veamos una tabla de equivalencias:

Dirección Grados Significado
to top 0 ó 360deg Gradiente lineal hacia arriba.
to top right 35deg Gradiente diagonal hacia derecha-arriba.
to right 90deg Gradiente lineal hacia derecha.
to bottom right 145deg Gradiente diagonal hacia abajo-derecha.
to bottom 180deg Gradiente lineal hacia abajo.
to bottom left 215deg Gradiente diagonal hacia abajo-izquierda.
to left 270deg Gradiente lineal hacia izquierda.
to top left 325deg Gradiente diagonal hacia izquierda-arriba.

Tabla 2 : Tabla de Equivalencias

Nota: Si utilizas los grados en lugar de las palabras clave puedes usar valores intermedios (por ejemplo, 280deg o 58deg) y ser más preciso con la dirección si lo necesitas.

Puntualizando:

El CSS necesario para generar un degradado es relativamente corto. Necesitamos ciertos datos: un mínimo de dos colores y una dirección. De azul a rojo (por solo citar los valores del ejemplo) desde la izquierda a la derecha.

Para visualizar, y que puedes tú mismo aplicar, acá el siguiente código para poder exponer las explicaciones que le siguen:

background: -webkit-linear-gradient(90deg, azul 10%, rojo 90%);
background: -moz-linear-gradient(90deg, azul 10%, rojo 90%);
background: -ms-linear-gradient(90deg, azul 10%, rojo 90%);
background: -o-linear-gradient(90deg, azul 10%, rojo 90%);
background: linear-gradient(90deg, azul 10%, rojo 90%);

Simple y rápido. A la propiedad background le aplicamos un gradiente lineal (linear-gradient) con una direccionalidad de 90 grados (de izquierda a derecha) entre dos colores, azul y rojo.

Puedes notar que ambos colores tienen un valor en %. Eso indica en qué momento del degradado son aplicados. El color azul comenzará a degradarse a partir del 10% de ancho, hasta el rojo, que será totalmente rojo cuando el ancho del contenedor alcance el 90%.

Las 5 líneas no son necesaria (es para asegurar la compatibilidad entre los navegadores más antiguos). Lo importante es que la última que se aplique sea la regla sin prefijos.

Más colores y diagonales. Podemos darle un poco más de complejidad añadiendo más colores, cambiando el grado de inclinación e incluso el tipo de degradado. Aún cuando no hemos trabajado todavía los tipos de gradientes, hay otras variaciones posibles de hacer, que cito, como adelanto al estudio de los gradientes, en los dos siguientes párrafos.

Además de linear-gradient tenemos radial-gradient, donde partiremos desde el centro hacia los extremos.

Y si queremos jugar más, también tenemos disponibles repeating-linear-gradient y repeating-radial-gradient.

¡El límite de los degradados lo pone tu imaginación!.

IR A PORTAFOLIO


3.Colores del gradiente

Por defecto, las distancias entre colores se ajustan automáticamente con proporciones equivalentes, salvo que especifiquemos un tamaño (porcentaje o píxeles, por ejemplo) justo después del color en cuestión, que se puede indicar de forma opcional:

div {
  background: linear-gradient(to right, blue 50%, red 55%, green 75%);
}

Este tamaño representa el momento en el que el gradiente comienza a cambiar el color, respecto al tamaño del gradiente completo. En este fragmento de código, a diferencia del anterior, nos mostraría un gradiente similar al que vemos a continuación, donde se aprecia que los tamaños o distancias entre colores no son equivalentes, sino que corresponden azul (0-50%), rojo (50%-55%) y verde (55%-75%), el cuál permanece hasta el final al no haber ningún color más:

Gradiente CSS con tamaño

Imagen 4 : Gradiente CSS con tamaño


IR A PORTAFOLIO

4.Uso en el mundo real

¿En dónde podríamos usar degradados de maneras interesantes?

1. Superposición sobre una imagen hero


Este es un ejemplo de una capa superpuesta, en la que el degradado es ligeramente transparente (este usa valores rgba) y está colocado encima de una fotografía.

La propiedad background puede aceptar varios valores que forman una pila, el primero siendo el de la parte superior y el último encontrándose en la parte inferior de la pila. Si definimos un degradado primero, este se ubicará encima de cualquier cosa que definamos después. Echa un vistazo a este fragmento de código y ve si puedes adivinar lo que está sucediendo:

Este es el efecto resultante:

Imagen 5 : Superposición


2. Degradado en texto

Tener un degradado en el texto es un efecto magnífico, aunque no es totalmente compatible en un sentido puro. En vez de eso, confiamos en la propiedad background-clip (y su amiga con prefijo -webkit-background-clip), que es una especie de truco pero funciona muy bien.

Comenzamos con un fragmento de texto (un h1 en este caso) y aplicamos un degradado a su propiedad background. Después, la propiedad background-clip, dado un valor de text, elimina el fondo del bloque completo a excepción del área que se encuentra detrás del texto. El texto color oscurece el fondo, desde luego, por lo que le asignamos el valor transparent para dejar que el degradado brille a través de él:


Imagen 6 : Valor transparent


3. Bordes con degradado

Los degradados para los bordes son algo que quizá hayas visto en Envato Elements, y son una excelente manera de mejorar visualmente tu interfaz de usuario. Se hace de forma sutil, pero echa un vistazo al degradado lineal que va del azul al púrpura en los bordes de estos botones:

Hay un par de enfoques para lograr este efecto. El primero depende de que le demos un borde transparente a un elemento primero (un ancla, un contenedor, lo que sea). Después aplicamos nuestro degradado usando la propiedad border-image. Finalmente, establecemos el valor de border-image-slice en 1, para que el degradado use el contorno completo del borde.

Este es el resultado:

Imagen 7 : Modelo 1 de borde con degradado


Sin embargo, hay un par de problemas con este enfoque. En primer lugar, border-image no es universalmente compatible con todos los navegadores, especialmente con las versiones más antiguas de IE. En segundo lugar, este enfoque no te permitirá agregar un border-radius, como el que ves en la interfaz de usuario de Envato Elements. Así que veamos un enfoque alternativo.

Comenzamos asignando el valor position: relative a nuestro div. Luego le agregamos un pseudoelemento, dándole una posición absoluta negativa con el valor que sea que hayamos elegido para el ancho de nuestro borde (5px en este caso):

Esto nos dará un bloque de degradado sólido que cubrirá la totalidad de nuestro div. Agregar un z-index de -1 garantizará que el bloque de degradado se mueva hacia atrás del div.

A continuación (vaya, hay muchos pasos para este) agregamos un border-radius al pseudoelemento con un valor equivalente al de su padre (apliquemos 10px a cada uno). Y luego le asignamos al padre un fondo de lo que queramos; si le asignamos el mismo fondo que tiene la página, esto hará que se vea transparente.

Finalmente, recurrimos una vez más a nuestra amiga background-clip, aplicándola al padre y, en esta ocasión, dándole un valor de padding-box. Esta última acción garantiza que el relleno del div se extienda hasta la orilla del borde y no más.

Pues bien, este enfoque final no es realmente un borde en el verdadero sentido, pero logra el efecto que estamos buscando.

Imagen 8 : Modelo 2 de borde con degradado


Es posible emplear un tercer enfoque, esta vez usando box-shadow para lograr el efecto. Te recomiendo que eches un vistazo a Border-gradient mixin de John Grishin en CodePen para ver cómo funciona.


IR A PORTAFOLIO

5.Generadores on line de Gradientes

Como hemos visto crear degradado es muy fácil y sencillo. Pero si aún así buscas algo más visual y sencillo, siempre puedes acudir a los generadores de degradados de los cuales hay muchos generadores on line.Mi consejo es que siempre que uses alguna de estas herramientas, revises el código antes de implementarlo en tu diseño, por si hay algún elemento que pulir o limpiar.

Y, como punto final, convencido además de que representa un invalorable apoyo en el trabajo de diseño, de seguido expongo las URL de páginas donde puedas trabajar degradados con generadores on line:


El asunto radica en probar con todos ellos, para confirmar cuál te resulta mejor.

Del mismo modo, un degradado perfila mucho el estilo de nuestra web. Por ello piensa en el concepto global de la misma (ya sea flat design, material design u otra…) y piensa si realmente merece la pena. Y si la respuesta es sí, adelante, ya sabes como hacerlo! Suerte

Esperando que ésta lección sea de gran ayuda para los lectores de este blog, donde me dedico a investigar y compilar exhaustivamente cada tema, me suscribo hasta una siguiente publicación. Si bien éste blog es "mi cuaderno virtual de notas" y de allí los títulos de mis publicaciones, no dudo que sirva de consulta a otros interesados en los temas acá tratados.

IR A PORTAFOLIO


6. Bibliografía



https://lenguajecss.com/css/colores-y-fondos/gradientes-css/

https://www.silocreativo.com/degradados-css3-fondos-gradientes/

https://webdesign.tutsplus.com/es/tutorials/how-to-use-gradients-on-the-web--cms-29922

https://www.w3schools.com/css/css3_gradients.asp#:~:text=%20CSS%20defines%20two%20types%20of%20gradients%3A%20,Radial%20Gradients%20%28defined%20by%20their%20center%29%20More%20


Complementarios:
https://webdesign.tutsplus.com/es/articles/good-golly-gradients-all-over-the-web--cms-25481
https://www.bing.com/search?q=elemento+gradients+en+css&qs=n&sp=-1&pq=elemento+gradients+en+css&sc=0-25&sk=&cvid=37E398C3C0044B2EB60AC8D8FFEB49EF&first=1&FORM=PERE