👨‍💻 Gradientes en CSS | parte 4 | los degradados conicos.

Imagen 1: 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. En esta lección estudiaremos el uso de los degradados cónicos.

Portafolio de temas tratados en esta publicación:

1. ACLARATORIA
2. ¿EN QUÉ CONSISTE?
3. APLICACIÓN
4. BIBLIOGRAFÍA

IR A PORTAFOLIO

---

1. ACLARATORIA

Esta lección es parte complementaria del tema GRADIENTES EN CSS en el sentido que se hace un tratamiento individual de los degradados cónicos, para favorecer la riqueza argumentativa que sería imposible hacerlo en la publicación original (parte 1 de la serie) en la cual, originalmente, se incluyó originalmente la explicación de todos los gradientes, repercutiendo en un peso considerable, que afectaba la carga de la página, y el cansancio en la lectura.

De tal manera que esta lección es susceptible de posteriores modificaciones, en virtud de material nuevo que vaya surgiendo en internet, y que pueda contribuir a la ampliación de lo ya desarrollado.

Hecha esta aclaratoria, necesaria, paso de seguido a exponer el material producto de la investigación de este tema, según lo conseguido hasta el momento.

IR A PORTAFOLIO

---

2. ¿EN QUÉ CONSISTE?

Recientemente, se ha incorporado un nuevo tipo de gradiente muy interesante en CSS, visualmente muy similar al gradiente radial, pero tratándose de una visualización de un cono desde un plano superior, incluyendo sus sombras.

Valor	Significado
conic-gradient(, , ...)	Gradiente básico entre colores.
conic-gradient(from , , , ...)	Gradiente indicando punto de inicio.
conic-gradient(from at ubicación, , , ...)	Gradiente indicando ubicación del inicio.

Tabla 8 : Gradiente Cónico

Donde:

Parámetros	Valor
from	Ángulo desde donde comienza el gradiente cónico. Por defecto from 0deg.
at [ubicación]	center | top | left | right | bottom | top left | top right | bottom left | bottom right
	El primer color del gradiente
	El siguiente color del gradiente
	De forma opcional, se puede indicar a que altura comienza a cambiar el gradiente.
...	(Se pueden seguir añadiendo colores)

Tabla 9 : Gradiente Cónico: parámetros y valores

IR A PORTAFOLIO

---

3. APLICACIÓN

A continuación podemos ver la diferencia de un gradiente linear-gradient, un radial-gradient y un conic-gradient:

Imagen 7 : Gradientes:Comparación lineal, radial y cónico

Poco hay que añadir en este tipo de gradiente, ya que funciona muy similar a los anteriores. La única diferencia mencionable es el uso de la palabra clave from antes de indicar los ángulos de dirección, si se requiere.

______________
IR A PORTAFOLIO

---

4. Bibliografía

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

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

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