Patrones de fondo, simplificados por degradados cónicos

Para aquellos que se han perdido las grandes noticias, ¡Firefox ahora admite gradientes cónicos!

A partir de Firefox 75, lanzado el 7 de abril, podemos ir a about:config, buscar el indicador layout.css.conic-gradient.enabled y establecer su valor en true(es falseel valor predeterminado y todo lo que se necesita para cambiar es hacer doble clic en él). .

Con esto habilitado, ahora podemos probar nuestro CSS, incluidos los gradientes cónicos en Firefox también.

Si bien algunas de las demostraciones de este artículo funcionan bien cuando se usa un polyfill, algunas usan variables CSS dentro del gradiente cónico y, por lo tanto, requieren soporte nativo para esta característica.

Una cosa que me gusta especialmente de los degradados cónicos es lo mucho que pueden simplificar backgroundlos patrones. Así que tomemos algunos linear-gradient()patrones de la galería creada por Lea Verou hace aproximadamente una década y veamos cómo podemos simplificarlos ahora conic-gradient.

Pirámide

El patrón anterior utiliza cuatro degradados lineales:

background:  linear-gradient(315deg, transparent 75%, #d45d55 0) -10px 0,  linear-gradient(45deg, transparent 75%, #d45d55 0) -10px 0,  linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0,  linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0 #561a16;background-size: 20px 20px;

Eso es bastante CSS y quizás incluso un poco intimidante. No es fácil simplemente mirar esto y entender cómo todo se suma para darnos el patrón piramidal. Ciertamente no podría hacerlo. Me tomó un tiempo conseguirlo, aunque los degradados son una de las características de CSS con las que me siento más cómodo. Así que no te preocupes si no entiendes cómo esos gradientes logran crear el patrón piramidal porque, uno, es complicado y, dos, ¡ni siquiera necesitas entender eso!

Usando conic-gradient(), ahora podemos obtener el mismo resultado de una manera mucho más simple, ¡con una sola backgroundcapa en lugar de cuatro!

Lo que me gusta hacer cuando codifico patrones repetidos es dibujar líneas verticales y horizontales equidistantes que delimitan los cuadros rectangulares definidos por el archivo background-size. En este caso, es bastante obvio que tenemos cuadros cuadrados y dónde están sus límites, pero es una técnica realmente útil para patrones más complejos.

De forma predeterminada, los gradientes cónicos comienzan a las 12 en punto y van en el sentido de las agujas del reloj. Sin embargo, en nuestro caso, queremos compensar el inicio del degradado 45° en el sentido de las agujas del reloj y luego hacer que cada una de las cuatro sombras ocupe una cuarta parte (25%) del espacio disponible alrededor del punto medio de nuestro cuadro cuadrado.

Esto significa que nuestro patrón piramidal se puede reducir a:

$s: 20px;background:  conic-gradient(from 45deg,     #561a16 25%,     #6a201b 0% 50%,     #a7332b 0% 75%,     #d45d55 0%)     50%/ #{$s $s};

No sólo el código parece más simple, sino que también hemos pasado de 260 bytes a 103 bytes, reduciendo el código necesario para obtener este patrón a más de la mitad.

Estamos utilizando la sintaxis de doble posición, ya que también es compatible actualmente.

Podemos verlo en acción en el bolígrafo a continuación:

Tablero de damas

Este patrón de arriba se crea con dos degradados lineales:

background-color: #eee;background-image:  linear-gradient(45deg, black 25%, transparent 25%,     transparent 75%, black 75%, black),  linear-gradient(45deg, black 25%, transparent 25%,     transparent 75%, black 75%, black);background-size: 60px 60px;background-position: 0 0, 30px 30px;

¡Veamos cómo podemos simplificar este CSS al reemplazar estos degradados lineales por uno cónico!

Al igual que en el caso anterior, dibujamos líneas verticales y horizontales para ver mejor los rectángulos definidos por el background-size.

Al observar el cuadrado resaltado en deeppinkla ilustración de arriba, vemos que, en este caso, nuestro gradiente cónico comienza desde la posición predeterminada a las 12 en punto. Una cuarta parte es negra, la siguiente cuarta parte es blanca sucia y luego tenemos repetición (las mismas rebanadas de cuarto negro y luego blanco sucio una vez más).

Esta repetición en la segunda mitad del [0%, 100%]intervalo significa que podemos usar a repeating-conic-gradient(), lo que nos da el siguiente código (reduciendo el CSS compilado de 263 bytes a solo 73 bytes, lo que lo reduce en más de un 70%):

$s: 60px;background:  repeating-conic-gradient(#000 0% 25%, #eee 0% 50%)     50%/ #{$s $s};

El lápiz a continuación lo muestra en acción:

tablero de ajedrez diagonal

Nuevamente tenemos un patrón creado con dos degradados lineales:

background-color: #eee;background-image:   linear-gradient(45deg, black 25%, transparent 25%,     transparent 75%, black 75%, black),  linear-gradient(-45deg, black 25%, transparent 25%,     transparent 75%, black 75%, black);background-size: 60px 60px;

Dibujamos líneas horizontales y verticales para dividir este patrón en rectángulos idénticos:

Lo que tenemos ahora es prácticamente el mismo patrón de casilla de verificación que antes, con la única diferencia de que no comenzamos desde la posición predeterminada a las 12 en punto, sino desde 45° en el sentido de las agujas del reloj.

Si tienes problemas para visualizar cómo simplemente cambiar el ángulo inicial puede hacernos pasar del patrón anterior a este, puedes jugar con él en la demostración interactiva a continuación:

Tenga en cuenta que esta demostración no funciona en navegadores que no tienen soporte nativo para gradientes cónicos.

Esto significa que nuestro código tiene el siguiente aspecto:

$s: 60px;background:  repeating-conic-gradient(from 45deg,     #000 0% 25%, #eee 0% 50%)   50%/ #{$s $s};

Podemos verlo en acción a continuación:

Nuevamente, no sólo el código es más simple de entender, sino que también hemos pasado de 229 bytes a solo 83 bytes en el CSS compilado, ¡reduciéndolo en casi dos tercios!

Medias Rombas

Este patrón fue creado con cuatro degradados lineales:

background: #36c;background:  linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,  linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,  linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,  linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,  #36c;background-size: 15px 30px;

Al igual que en los casos anteriores, trazamos líneas verticales y horizontales equidistantes para ver mejor la unidad repetitiva:

Lo que tenemos aquí es un patrón formado por triángulos isósceles congruentes (los bordes en ángulo son iguales y los triángulos azul oscuro son un reflejo de los azul claro) formado por la intersección de líneas paralelas equidistantes que son horizontales, en ángulo en el sentido de las agujas del reloj, o al revés. Cada uno de estos tres tipos de líneas paralelas se resalta en la siguiente ilustración:

Cada celda del patrón contiene un triángulo completo y dos mitades de triángulo adyacentes en la parte superior, luego un reflejo de esta parte superior en la parte inferior. Esto significa que podemos identificar un grupo de triángulos rectángulos congruentes que nos ayudarán a obtener los ángulos que necesitamos para nuestro conic-gradient():

Esta ilustración nos muestra que el gradiente comienza desde un ángulo, βalejado del punto de inicio del gradiente cónico predeterminado a las 12 en punto. El primer corte cónico (el medio triángulo superior derecho) sube hasta α, el segundo (el triángulo oscuro inferior derecho) hasta 2·αy el tercero (el triángulo claro inferior) recorre la mitad del círculo desde el principio (es decir 180°, o 50%). El cuarto (el triángulo oscuro inferior izquierdo) va hacia 180° + αy el quinto (el triángulo claro superior izquierdo) va hacia 180° + 2·α, mientras que el sexto cubre el resto.

Del triángulo rectángulo resaltado obtenemos que:

tan(α) = (.5·h)/(.5·w) = h/w

Conociendo el ancho ( w) y el alto ( h) de una celda de patrón, podemos obtener los ángulos αy β:

α = atan(h/w)β = 90° - α

Da como resultado el patrón generado por el siguiente código:

$w: 15px;$h: 30px;$a: atan($h/$w)*180deg/pi();$b: 90deg - $a;$c0: #36c;$c1: #d6e0f5;html {  background:     conic-gradient(from $b,       $c1 0% $a,       $c0 0% 2*$a,       $c1 0% 50%,       $c0 0% 180deg + $a,       $c1 0% 180deg + 2*$a,       $c0 0%)     0 0/ #{$w $h};}

Esto significa pasar de 343 bytes a sólo 157 bytes en el CSS compilado. El resultado se puede ver a continuación:

Puede modificar el ancho ( $w) y el alto ( $h) del patrón en el código Sass para ver cómo el patrón se aplasta y se estira para diferentes relaciones de aspecto.

En el caso particular donde el ángulo entre 2*$ay 50%(o 180deg) también es $a, resulta que $anuestros 60degtriángulos isósceles son equiláteros y nuestro gradiente se puede reducir a uno repetido (y menos de 100 bytes en el CSS compilado):

$a: 60deg;$b: 90deg - $a;$w: 15px;$h: $w*tan($a);$c0: #36c;$c1: #d6e0f5;html {  background:     repeating-conic-gradient(from $b,       $c1 0% $a, $c0 0% 2*$a)     0 0/ #{$w $h}}

El resultado en vivo se puede ver a continuación:

Bonificación: ¡fondos de líneas que se cruzan!

Si bien estos no son patrones repetidos, son ejemplos de una situación en la que un único gradiente cónico logra un efecto que antes habría necesitado un montón de gradientes lineales.

Lo que tenemos aquí es un conic-gradient()creado a partir de dos líneas rectas que se cruzan dentro del cuadro rectangular donde configuramos el archivo background.

El gradiente gira alrededor del punto de coordenadas, x,ydonde se cruzan las dos líneas rectas. Comienza desde un ángulo, β, que es el ángulo del segmento de línea más cercano a la esquina superior derecha, luego tiene paradas bruscas en α, 50%(o 180°) y 180° + α.

Si queremos tener múltiples elementos con patrones similares creados con la ayuda de diferentes líneas que se cruzan y diferentes paletas, tenemos el caso de uso perfecto para las variables CSS:

.panel {  background:     conic-gradient(from var(--b) at var(--xy),       var(--c0) var(--a), var(--c1) 0% 50%,       var(--c2) 0% calc(180deg + var(--a)), var(--c3) 0%);}

Todo lo que tenemos que hacer es establecer la posición ( --xy), el ángulo inicial ( --b), el primer ángulo ( --a) y la paleta ( --c0hasta --c3).

.panel {  /* same as before */    :nth-child(1) {    --xy: 80% 65%;     --b: 31deg;    --a: 121deg;     --c0: #be5128;    --c1: #ce9248;    --c2: #e4c060;    --c3: #db9c4e  }    /* similarly for the other panels */}

En lugar de codificar, también podríamos generar estos valores aleatoriamente o extraerlos de un objeto de datos con la ayuda de un preprocesador CSS o HTML. En este segundo caso, estableceríamos estas propiedades personalizadas en línea, que es precisamente lo que hice en el Lápiz a continuación:

Dado que utilizamos propiedades personalizadas dentro de los gradientes cónicos, esta demostración no funciona en navegadores que no los admiten de forma nativa.

¡Bueno, eso es todo! Espero que hayas disfrutado este artículo y que te brinde algunas ideas sobre cómo los gradientes cónicos pueden hacerte la vida más fácil.