Una inmersión profunda en CSS en degradados radiales y cónicos

Una inmersión profunda en CSS en degradados radiales y cónicos
Resumen rápido ↬

En este artículo, veremos más de cerca dos gradientes: conic-gradient y radial-gradient. Verás cómo funciona cada uno de ellos en detalle, cuáles son las diferencias y similitudes entre ellos, cómo y dónde usarlos, y algunos casos de uso para cada uno.

Los gradientes de CSS son una característica útil de CSS que se puede usar para crear efectos de interfaz de usuario interesantes o incluso ayudarnos a dibujar algo sin la necesidad de crear elementos HTML para ello. Dos gradientes en los que me gustaría centrarme en este artículo son conic-gradient y radial-gradient. Cada uno funciona de manera diferente (los degradados cónicos son curvos, mientras que los degradados radiales son una línea recta).

Para seguir, no necesitas saber nada de ninguno de los dos. radial-gradient o conic-gradient. Haré todo lo posible para explicarlos de una buena manera.

¡Vamos a sumergirnos!

¿Qué es un gradiente radial?

De su nombre, radial-gradientNos brindan la capacidad de dibujar elementos radiales como un círculo o una elipse.

Veamos la sintaxis más básica.

El ejemplo más básico

En este ejemplo, tenemos un radial-gradient con dos paradas de color. Esto resultó en un gradiente en forma de elipse.

.element {
    background: radial-gradient(#9c27b0, #ff9800);
}
Gradiente radial

 

(Vista previa grande)

Lo anterior es lo más básico. radial-gradient podemos hacer en CSS. Quizás se esté preguntando, ¿por qué por defecto es una elipse? Bueno, déjame explicarte.

Si no hay un nombre de forma definido en el degradado (círculo o elipse), por defecto será una elipse en caso de que:

  • No hay tamaño determinado;
  • O bien, hay dos valores (para el ancho y la altura).

¿Cómo funciona un degradado radial?

Revisaré una serie de imágenes que mostrarán cómo funciona un degradado al incrementar diferentes palabras clave y adiciones.

Primero, volvamos al ejemplo inicial.

.element {
    background: radial-gradient(#9c27b0, #ff9800);
}

Cuando hay dos colores sin identificar la forma, el degradado será por defecto una elipse, así:

Gradiente en forma de elipse

 

(Vista previa grande)

La elipse está llenando el ancho y la altura de su contenedor. Se ve borroso porque el navegador asumió que los puntos de inicio y finalización son 0% y 100%, respectivamente.

Así es como el navegador ve el degradado:

.element {
    background: radial-gradient(#9c27b0 0%, #ff9800 100%);
}

si agregamos circle antes de la primera parada de color, así es como se ve:

.element {
    background: radial-gradient(circle, #9c27b0, #ff9800);
}
Gradiente en forma de círculo

 

(Vista previa grande)

Ahora que tiene una idea de cómo se ven el círculo y la elipse de forma predeterminada, entremos posicionamiento.

Por defecto, ambos están centrados horizontal y verticalmente en su contenedor. En otras palabras, en 50% 50%:

Elementos de elipse y círculo centrados horizontal y verticalmente en su contenedor

 

(Vista previa grande)

Lo importante a notar aquí es que el posicionamiento ocurre desde el centro del círculo o elipse, por lo que colocamos un círculo en el top left, lo que se posicionará es el punto central.

Echemos un vistazo más de cerca a algunos ejemplos.

.element {
    background: radial-gradient(circle at top left, #9c27b0, #ff9800);
}
Gradiente radial con círculo en la parte superior izquierda

 

(Vista previa grande)

También podríamos centrarlo en el lado derecho. Agregando solo right centrará el círculo en el right 50%:

.element {
    background: radial-gradient(circle at right, #9c27b0, #ff9800);
}

Así es como se ve:

Gradiente radial con círculo a la derecha

 

(Vista previa grande)

¡Más después del salto! Continúe leyendo a continuación ↓

¿Qué es un gradiente cónico?

El conic-gradient() La función CSS crea un degradado que gira alrededor del centro del elemento. Veamos un ejemplo básico.

.element {
    background: conic-gradient(#9c27b0, #ff9800);
}
gradiente cónico

 

(Vista previa grande)

Mira cómo el degradado comienza desde el punto central del elemento. Gira desde 0deg a 360 por defecto.

Veamos qué sucede cuando agregamos un valor de parada dura para el primer color.

.element {
    background: conic-gradient(#9c27b0 50%, #ff9800);
}
Gradiente cónico donde el primer color llena el 50% del elemento, el segundo se muestra gradualmente hasta el 100%

 

(Vista previa grande)

Ahora el primer color llena 50% del elemento, mientras que el segundo se mostrará gradualmente hasta 100%.

¿Qué sucede si también aplicamos un tope duro en el segundo color? En el fragmento a continuación, el primer color llenará 50% del elemento, el segundo partirá de 50% hasta el final (100%).

.element {
    background: conic-gradient(#9c27b0 50%, #ff9800 0);
}
Gradiente cónico donde el primer color llena el 50% del elemento y el segundo comienza desde el 50% hasta el final

 

(Vista previa grande)

Aumentar el primer valor de parada de color creará un relleno en ángulo:

.element {
    background: conic-gradient(#9c27b0 65%, #ff9800 0);
}
La primera parada de color aumenta hasta un 65 %, lo que forma un relleno en ángulo

 

(Vista previa grande)

No solo eso, sino que también podemos crear un degradado repetitivo usando la función CSS repeating-conic-gradient() Como se muestra abajo.

.element {
    background: repeating-conic-gradient(
    #9c27b0 0 15deg,
    #ff9800 15deg 30deg
    );
}

Los fragmentos anteriores llenan el primer color de 0deg a 15deg, entonces el segundo color se rellena desde 15deg a 30deg. Con la repetición, se verá como la siguiente figura:

Gradiente cónico repetitivo

 

(Vista previa grande)

Casos de uso para degradados radiales

A menudo, necesitamos agregar una ilustración o un patrón como fondo. En caso de que haya un titular y/o texto secundario, puede ser difícil leerlos, por supuesto.

radial-gradient En una sección de héroe

Usar un degradado de elipse con el mismo color que el fondo puede ayudar a que el contenido se destaque. En el siguiente ejemplo, observe cómo el contenido se superpone con el fondo. Hace que sea un poco más difícil concentrarse en leer que mirar el patrón:

Un ejemplo de un caso de uso donde el contenido se superpone con el fondo

 

(Vista previa grande)

Una solución común para eso es agregar una elipse con el mismo color que el fondo debajo (para que se mezcle con él).

Aquí está la sección principal con la elipse (coloreada en gris, solo para fines de demostración):

La sección del héroe con la elipse coloreada en gris.

 

(Vista previa grande)

Aquí está cómo reflejar eso en CSS:

.hero {
    background-color: #fbfafa;
    background-image: radial-gradient(#fbfafa, rgba(0,0,0,0) center/70% 70% no-repeat, url("hero-bg.svg");
    background-position: center;
    background-size: 70% 70%, cover;
    background-repeat: no-repeat;
}
Y ejemplo de un caso de uso donde el contenido ya no se superpone con el fondo, debido a la elipse agregada con el mismo color que el fondo debajo

 

(Vista previa grande)

De esa manera, cubrimos el patrón debajo del contenido, ahora es mucho más fácil leerlo.

Efecto de patrón punteado

Para crear un efecto de un patrón punteado, podemos usar radial-gradient. Así es como se ve:

patrón punteado

 

(Vista previa grande)

Para lograr eso, podemos crear un pequeño círculo y el resto del degradado será transparente.

Así es como se ve por sí solo:

El color del círculo y el resto del degradado es de color transparente.

 

(Vista previa grande)

Cuando se repite este patrón, así es como se ve:

Un patrón repetido con un color cirlce y el resto del degradado es de color transparente

 

(Vista previa grande)

Para reflejar eso en CSS, necesitamos agregar un ancho y alto para el degradado. Dado que los degradados se repiten de forma predeterminada, dará como resultado el patrón anterior.

.dot-pattern {
  --color-1: #9c27b0;
  --color-2: rgba(0,0,0,0);
  background-image: radial-gradient(circle at 2px 2px, var(--color-1) 1px, var(--color-2) 0);
  background-size: 15px 15px;
}

Efectos de imagen

Combinado con mix-blend-mode, los degradados radiales pueden crear algunos efectos de interfaz de usuario interesantes para las imágenes. En el siguiente ejemplo, observe cómo se coloca el círculo en la esquina superior izquierda. Podemos beneficiarnos de eso jugando con los modos de mezcla para lograr un efecto específico.

Un ejemplo en el que el degradado radial crea un efecto de interfaz de usuario interesante para una imagen. Es decir, el círculo se coloca en la esquina superior izquierda de la imagen, lo que crea un degradado.

 

(Vista previa grande)
.thumb:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, #9c27b0, #ff9800);
    mix-blend-mode: hard-light;
    opacity: 0.4;
}

Casos de uso para gradientes cónicos

Gráficos circulares

El primer caso de uso que se me ocurre para los gradientes cónicos son los gráficos circulares simples. Ha sido algo que queríamos hacer en CSS hace un tiempo, y ahora es posible con facilidad.

Gráfico circular

 

Un gráfico circular simple (Vista previa grande)
.pie-chart {
    width: 100px;
    height: 100px;
    background: conic-gradient(from 0deg, #b2daf9 128deg, #2096f3 0);
    border-radius: 50%;
}

Fondos Y Patrones

Hay toneladas de posibilidades para crear un patrón con gradientes cónicos. Para este ejemplo, me centraré en el patrón de tablero de ajedrez.

patrón de tablero de ajedrez

 

Un patrón de tablero de ajedrez 2×2 logrado con conic-gradient(). (Vista previa grande)

Esto es lo que sucede en el siguiente gradiente:

  • El #fff el color esta cubriendo 90deg del elemento;
  • Luego le sigue #000 a 180deg;
  • Luego le sigue #fff a 270deg;
  • Finalmente, el #000 lleno hasta el ángulo final (360deg).
.checkerboard {
    --size: 25px;
    width: 200px;
    height: 100px;
    background-image: conic-gradient(#fff 90deg, #000 0 180deg, #fff 0 270deg, #000 0);
    background-size: var(--size) var(--size);
}

Cuando se repite y se controla mediante background-size, se verá así:

Un patrón de tablero de ajedrez repetido

 

Una vista previa del patrón de tablero de ajedrez que se ha repetido varias veces. (Vista previa grande)

No solo eso, sino que podemos conseguir efectos realmente interesantes rotando algunos valores de forma diferente. Aquí hay un ejemplo:

.element {
    background-image: conic-gradient(#fff 90deg, #000 0 136deg, #fff 0 313deg, #000 0);
}
Un patrón de tablero de ajedrez repetido girado

 

Mismo patrón de tablero de ajedrez, pero diferente. (Vista previa grande)

Patrones de interfaz de usuario

A veces, es posible que necesitemos generar un patrón de interfaz de usuario aleatorio que tome diferentes formas. Nosotros podemos usar conic-gradient para lograr eso La idea es que controlemos el tamaño del gradiente a través de background-size, y luego cambie el conic-gradient ángulo para lograr diferentes efectos.

Tenemos un elemento con una anchura y una altura de 200px. Dentro de este elemento, repetiremos el fondo.

.element {
    --size: 20px;
    width: 200px;
    height: 200px;
    background-size: var(--size) var(--size);
}

Para imaginarlo mejor, cada fondo tendrá un tamaño de 20px tanto para el ancho como para el alto, y se repetirá en horizontal y en vertical.

Un elemento con un ancho y alto de 200px, y dentro de este elemento hay un fondo repetido que tiene un tamaño de 20px

 

Un elemento (200×200px) que tiene un fondo repetido con un tamaño de 20px. (Vista previa grande)

Ahora, cada cuadrado que veas contendrá un conic-gradient. Por ahora, agregaré dos tonos de azul para demostrar mejor el concepto.

.element {
    --size: 20px;
    width: 200px;
    height: 200px;
    background: conic-gradient(#2296F3 0.13turn, rgba(255,255,255,0) 0);
    background-size: var(--size) var(--size);
}

Así queda el degradado cónico sin repetirlo:

Dos cuadrados con gradientes cónicos azules en forma de triángulo. El primer cuadrado tiene un fondo azul oscuro y el segundo cuadrado tiene uno transparente.

 

(Vista previa grande)

Con la repetición, se ve así. Ahora, el objetivo es hacer que el segundo color sea transparente, lo que dará como resultado una forma de triángulo.

Un elemento con un fondo repetido con formas triangulares.

 

(Vista previa grande)

Al tener un ángulo diferente, podemos aleatorizar la forma del patrón para obtener efectos interesantes.

Diferentes formas de patrón que están formadas por diferentes ángulos: 0,08 de vuelta, 0,03 de vuelta y 0,5 de vuelta

 

(Vista previa grande)

Animación de degradados cónicos con @property

Podemos crear interesantes efectos de animación con conic-gradient. Sin embargo, esto no es posible de forma predeterminada. Necesitamos usar el @property definición para definir una propiedad personalizada que usaremos para la animación.

@property --conic-mask {
    syntax: '';
    inherits: false;
    initial-value: 0%;
}

.conic-mask {
    --conic-mask: 0%;
    -webkit-mask: conic-gradient(from 0deg at 50% 50%, #000 var(--conic-mask), #0000);
    transition: --conic-mask 1s ease-out;
}

.conic-mask: hover {
    --conic-mask: 100%;
}
Un efecto de animación con conic-gradient.

Corte esquinas con formas personalizadas

Esta es una demostración de Acompaña Afif. La idea es usar conic-gradient como máscara para crear efectos de esquinas recortadas:

ver la pluma [Cut corners with custom shape [forked]](https://codepen.io/smashingmag/pen/jOGKjxQ) por Acompaña Afif.

ver la pluma Cortar esquinas con forma personalizada [forked] por Acompaña Afif.

Gradientes cónicos

Nosotros podemos usar conic-gradient para crear sutiles efectos de degradado que tienen esquinas más oscuras o esquinas más claras con otros colores. cónica.css es una pequeña biblioteca CSS de Adam Argyle que presenta muchos gradientes cónicos encantadores.

Gradientes cónicos con diferentes colores.

 

(Vista previa grande)

Uso de degradados cónicos para fondos de sección

Vi esto en una demostración compartida por Scott Kellum. Realmente me gustó la forma en que funciona la técnica para agregar un color parcial a un pie de página mientras que al mismo tiempo se ve suave.

.footer {
    background: conic-gradient(from 0.25turn at 25% 0%, #FFD9CE, rgba(#FFD9CE, 0) 50%);
}
Pie de página de Typetura con degradado cónico

 

(Vista previa grande)

Conclusión

Como has visto, usando CSS radial-gradient y conic-gradient Las funciones pueden resultar en interfaces de usuario muy interesantes (y útiles). Sin embargo, no hay blanco y negro cuando se trata de cuándo usar cada uno. La mayoría de las veces, depende del caso de uso en cuestión.

Espero que encuentres útil el artículo. ¡Muchas gracias por leer!

Deja un comentario

Tu dirección de correo electrónico no será publicada.