👨‍💻 Gradientes en CSS | parte 3 | los degradados radiales.

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 radiales.

Portafolio de temas tratados en esta publicación:

1. ACLARATORIA
2. ¿EN QUÉ CONSISTE?
3. SINTAXIS
4. APLICACIÓN
5. VALORES | PARÁMETROS
6. EJEMPLOS
7. 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 radiales, 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 conseguifo hasta el momento.

IR A PORTAFOLIO

---

5.¿EN QUÉ CONSISTE?

Pasando ahora al tema que nos ocupa, podemos usar todo lo que hemos aprendido hasta ahora y cambiarlo para mostrar degradados radiales, ya que como se dijo al principio, a parte de gradientes lineales, también podemos crear otros tipos de gradientes, como por ejemplo, los gradientes radiales, que permite crear degradados con formas circulares.

La función CSS radial-gradient() crea una imagen () que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (center) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS <gradient>.

Los gradientes radiales son definidos por su centro (center), el contorno y posición de la figura resultante y los puntos de definición de color (color stops). El gradiente radial consiste, desde su centro hasta su figura resultante y potencialmente más allá, en figuras concénctricas sucesivas de escala uniforme, idénticas en su figura final. Los stops de color son posicionados en un rayo de gradiente virtual que va horizontalmente desde el centro hacia la derecha. La proporción para posicionar los stops de colores es relativa a la intersección entre la figura final y su rayo de gradiente, representando el 100%. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.

Las figuras resultantes solo pueden ser círculos (circle) o elipses (ellipse).

Como cualquier otro gradiente, un gradiente radial CSS no es un <color> CSS, sino una imagen sin dimensiones intrínsecas, es decir, no tiene un tamaño natural o predefinido, ni radio. Su tamaño concreto coincidirá con el del elemento al que se aplica.

La función radial-gradient no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS

IR A PORTAFOLIO

---

3. SINTAXIS

Sintaxis

// Definición de la figura
  
  
radial-gradient( circle, … )                /* Sinónimo de radial-gradient
                                               (circle farthest-corner, … ) */

radial-gradient( ellipse, … )               /* Sinónimo de radial-gradient
                                               ( ellipse farthest-corner, … ) */

radial-gradient( <extent-keyword>, … )      /* Dibuja un círculo */

radial-gradient( circle radius, … )         /* Un círculo centrado con longitud dada.  
                                               Puede ser un porcentaje */

radial-gradient( ellipse x-axis y-axis, … ) /* Los dos ejes semi-mayores son indicados, 
                                               horizontal y después vertical */

// Definición de la posición de la figura
radial-gradient ( … at <position>, … )

// Definición de los stops de colores
radial-gradient ( …, <color-stop>, … )
radial-gradient ( …, <color-stop>, <color-stop> )