Para aquellos que se han perdido la gran noticia, ¡Firefox ahora admite gradientes cónicos!
Comenzando con Firefox 75, lanzado el 7 de abril, podemos ir a about:config, busca el layout.css.conic-gradient.enabled bandera y establezca su valor en true (su false de forma predeterminada y todo lo que se necesita para cambiar es hacer doble clic en él).
Habilitar gradientes cónicos en Firefox 75+
Con eso habilitado, ahora podemos probar nuestro CSS incluyendo 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 degradado cónico y, por lo tanto, requieren soporte nativo para esta función.
Una cosa que me gusta particularmente de los gradientes cónicos es cuánto pueden simplificar background patrones. Así que tomemos algunos linear-gradient() patrones de la galería creada por Lea Verou hace aproximadamente una década y vea cómo ahora podemos simplificarlos con conic-gradient!
Pirámide
El patrón piramidal
El patrón anterior usa cuatro gradientes 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 comprender cómo se suma todo 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 se preocupe si no comprende cómo esos gradientes logran crear el patrón piramidal porque, uno, es complicado y, dos, ¡ni siquiera necesita entender eso!
Utilizando conic-gradient(), ahora podemos obtener el mismo resultado de una manera mucho más simple, con un solo background capa en lugar de cuatro!
Lo que me gusta hacer al codificar patrones repetidos es dibujar líneas verticales y horizontales equidistantes delimitando los cuadros rectangulares definidos por el background-size. En este caso, es bastante obvio que tenemos cajas cuadradas y dónde están sus límites, pero es una técnica realmente útil para patrones más complejos.
Resaltando las celdas del patrón
De forma predeterminada, los gradientes cónicos comienzan a partir de las 12 en punto y van en el sentido de las agujas del reloj. Sin embargo, en nuestro caso, queremos compensar el inicio del gradiente en 45 ° en el sentido de las agujas del reloj y luego hacer que cada uno de los cuatro tonos ocupe un cuarto (25%) del espacio disponible alrededor del punto medio de nuestra caja cuadrada.
Una celda de patrón con paradas duras de un gradiente cónico en cada 25% a partir de 45 ° wrt el eje vertical (en vivo).
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};El código no solo 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 usando la sintaxis de doble posición, ya que también está bien soportada en estos días.
Podemos verlo en acción en el lápiz a continuación:
Tablero de damas
El patrón de tablero de ajedrez
Este patrón anterior se crea con dos gradientes 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 gradientes 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.
Resaltando las celdas del patrón
Mirando el cuadrado resaltado en deeppink En la ilustración de arriba, vemos que, en este caso, nuestro gradiente cónico comienza desde la posición predeterminada a las 12 en punto. Un cuarto es negro, el siguiente cuarto es blanco sucio y luego tenemos la repetición (las mismas rodajas negras y luego blancas sucias una vez más).
Una celda de patrón con un gradiente cónico se detiene cada 25%, comenzando desde el valor predeterminado a las 12 en punto y repitiéndose después del 50% (demostración).
Esta repetición en la segunda mitad del [0%, 100%] intervalo significa que podemos usar un repeating-conic-gradient(), 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 del 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
El patrón de tablero de ajedrez diagonal
Nuevamente, tenemos un patrón creado con dos gradientes 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:
Resaltando las celdas del patrón
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 tiene problemas para visualizar cómo el simple hecho de cambiar el ángulo de inicio puede hacernos pasar del patrón anterior a este, puede 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 solo el código es más fácil 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!
Half-Rombes
El patrón de los medios rombos
Este patrón se creó con cuatro gradientes 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, dibujamos líneas verticales y horizontales equidistantes para ver mejor la unidad de repetición:
Resaltando las celdas del patrón.
Lo que tenemos aquí es un patrón que se compone de 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:
Guías paralelas
Cada celda de patrón contiene un triángulo completo y dos mitades de triángulos 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():
Una celda de patrón con paradas rígidas de un gradiente cónico de modo que sean horizontales o atraviesen las esquinas de la celda, todo comenzando desde β con el eje vertical (demostración)
Esta ilustración nos muestra que el gradiente comienza desde un ángulo, β, lejos del punto de inicio del gradiente cónico predeterminado a las 12 en punto. La primera rebanada cónica (el medio triángulo superior derecho) sube a α, el segundo (el triángulo oscuro inferior derecho) hasta 2·α, y el tercero (el triángulo de luz inferior) recorre la mitad del círculo desde el principio (eso es 180°, o 50%). El cuarto (el triángulo oscuro inferior izquierdo) va a 180° + α y el quinto (el triángulo claro superior izquierdo) va a 180° + 2·α, mientras que el sexto cubre el resto.
Consiguiendo α y β (manifestación)
Del triángulo rectángulo resaltado obtenemos que:
tan(α) = (.5·h)/(.5·w) = h/wConociendo el ancho (w) y altura (h) de una celda de patrón, podemos obtener los ángulos α y β:
α = atan(h/w)
β = 90° - αDa como resultado el patrón que genera 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 solo 157 bytes en el CSS compilado. El resultado se puede ver a continuación:
Puede modificar el ancho del patrón ($w) y altura ($h) 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*$a y 50% (o 180deg) es también $a, resulta que $a es 60deg, nuestros triá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:
Bono: ¡Fondos de líneas que se cruzan!
Ejemplos de fondo de líneas de intersección
Si bien estos no son patrones repetidos, son ejemplos de una situación en la que un solo gradiente cónico logra un efecto que antes habría necesitado un montón de lineales.
Lo que tenemos aquí es un conic-gradient() creado a partir de dos líneas rectas que se cruzan dentro de la caja rectangular donde establecemos el background.
Estructura de patrón de bonificación (ldemo)
El gradiente gira alrededor del punto de coordenadas, x,y, donde se cruzan las dos líneas rectas. Empieza desde un ángulo β, que es el ángulo del segmento de línea que está más cerca de la esquina superior derecha, luego tiene paradas firmes en α, 50% (o 180°) y 180° + α.
Si queremos tener varios elementos con patrones similares creados con la ayuda de diferentes líneas de intersección 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 de inicio (--b), el primer ángulo (--a) y la paleta (--c0 mediante --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 estamos usando propiedades personalizadas dentro de los degradados 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.