Los degradados lineales son fáciles de crear en CSS y son extremadamente útiles. Como veremos en este artículo, podemos hacerlos visualmente mucho más suaves al crearlos con degradados no lineales. Bueno, ¡no lineal en el sentido de relajación, de todos modos!
Aquí hay un ejemplo que muestra cuán riguroso es un estándar linear-gradient() se puede comparar con lo suave que podemos hacerlo facilitándolo:
Captura de pantalla de “El bueno, el feo y el malo” con degradados superpuestos.
- Il buono (lo bueno): gradientes suaves en CSS que se integran en su contexto.
- Il cattivo (lo malo): Sin protección de texto (mala accesibilidad).
- Il brutto (lo feo): gradientes lineales estándar con bordes afilados.
En este artículo, nos centraremos en cómo podemos convertir Il brutto en Il buono.
Los frustrantes bordes afilados de background: linear-gradient()
Últimamente, he estado jugando con los degradados en el trabajo. Me frustraron los gradientes lineales simples porque se veían como Il cattivo arriba.
/* Sharp edges :( */
.image__text {
background-image: linear-gradient(
hsla(0, 0%, 0%, 0.6),
transparent;
);
}Empecé a buscar la posibilidad de crear degradados visualmente más atractivos de forma constante. Para ser más precisos, rápidamente observé algunos degradados de aspecto más bonito como únicos y luego comencé a retocar cuando llegué a casa.
Inspiración: matemáticas y física
Dado que un degradado es una transición de color, me inspiré en cómo abordamos las transiciones en otros lugares.
Siempre me ha fascinado la espiral de Euler (o Cornu), que tiene una curvatura que aumenta linealmente con la longitud de la curva, es decir, a medida que caminamos a lo largo de la línea desde (0, 0) el radio disminuye linealmente con la distancia que recorremos. caminar (ya que la curvatura es el recíproco del radio).
El resultado final es una curva que pasa lo más suavemente posible de una línea recta a una curva. (Nota al margen: ¡las líneas rectas en el espacio euclidiano son curvas con un radio infinito!)
Euler Spiral de AdiJapan, CC BY-SA 3.0
Este tipo de curva se llama curva de transición y se usa en la palabra real. La próxima vez, cuando salga de una carretera bien construida, observe cuán gradualmente gira el volante. Podemos agradecer a Euler por mantener los cambios repentinos en la aceleración centrípeta al mínimo absoluto, es decir, sus matemáticas son la razón por la que el automóvil no se voltea justo cuando salimos de la autopista, incluso en el límite de velocidad de la autopista.
La siguiente imagen es un ejemplo de cómo los cambios graduales son los cambios en la curvatura de las carreteras.
Intersección fuera de Sagamihara, Japón por @digitalanthill
Inspiración: tipografía
Los diseñadores tipográficos a lo largo de la historia han estado obsesionados con las curvas suaves. Lo hemos hecho porque no queremos que las letras y los números parezcan una combinación de diferentes formas, sino que en sí mismos formen una forma coherente.
Es por eso que hice la transición de una línea recta al círculo en el “9” a continuación lo más suave posible. Hace que el número 9 se lea como una forma única y no como una línea más un círculo.
Como diseñadores tipográficos, tenemos herramientas para ayudarnos a lograrlo. FontForge, un editor de fuentes de código abierto, incluso tiene un modo de dibujo Spiro / Euler. Una de las extensiones de diseño tipográfico más populares es Speed Punk, que visualiza la curvatura.
Modo Spiro en FontForge a la izquierda y visualización Speed Punk dentro de Glyphs a la derecha.
Inspiración: Diseño
Apple utiliza este enfoque para las transiciones de línea-curva en gran medida en los departamentos de diseño digital y de hardware. (Ver Los íconos de Apple tienen esa forma por una muy buena razón). Cuando Apple lanzó iOS7, las máscaras de iconos se actualizaron para tener una transición mucho más suave de la línea recta a las esquinas redondeadas.
Visualización de la curvatura de los iconos de las aplicaciones iOS6 e iOS7.
(Nota al margen: la forma de iOS7 anterior se tomó directamente de Apple HIG, que desafortunadamente tiene algunas imperfecciones menores, especialmente donde las líneas horizontales comienzan a curvarse. También se lo conoce a veces como “Squircle”).
Inspiración: Diseño Web
En diseño web, en algunos casos hemos estado limitados por lo que podemos hacer. Por ejemplo, border-radius no ofrece ninguna forma de hacer una ardilla como el ícono de iOS7. Similarmente con linear-gradient, no hay facilidades naturales disponibles.
Sin embargo, ¡tenemos facilidades y curvas Bézier disponibles en animaciones! Nos han permitido hacer que las animaciones parezcan más naturales, suaves y sutiles.
Captura de pantalla de easings.net
Implicaciones del gradiente
La mayoría de las veces, en el diseño web, queremos que el degradado se mezcle tanto como sea posible. Cuando tenemos un gradiente de protección de texto como Il buono, no queremos que el usuario preste atención al gradiente en sí. Debería ser bastante invisible, permitiendo al lector enfocarse en la imagen y el texto.
Malla
En las pautas de estilo de Material Design para imágenes, los diseñadores de Google hablan sobre gradientes de protección de texto. Los llaman malla. Ellos recomiendan:
[the] el degradado debe ser largo … con el punto central alrededor de 3/10 hacia el lado más oscuro del degradado. Esto le da al degradado una caída natural y evita un borde afilado.
Una malla de acuerdo con las pautas de Material Design
No podemos crear exactamente eso con degradados lineales, pero podemos (y lo haremos) crear una aproximación de “baja poli” con más paradas de color.
Una malla con 5 paradas de color para mostrar el principio.
Usar solo 5 paradas de color (como en la ilustración de arriba) crearía algunas bandas serias. Agregar más paradas hace que el degradado sea mucho más suave. Esto es exactamente lo que hice en la demostración que vio en la primera imagen de este artículo. Il buono tiene un degradado de 13 paradas de color, lo que hace que se mezcle mejor con la imagen.
Vea Pen The Good, The Bad & The Ugly: texto correcto de Andreas Larsen (@larsenwork) en CodePen.
En comparación con la malla de Material Design, la modifiqué para que sea un poco más lineal al principio para lograr un mayor contraste de texto y darle un desvanecimiento más suave.
Comparación entre la malla de Material Design y la mía dibujada usando 13 paradas de color.
Si comparamos la malla de Material Design con un degradado lineal simple, entonces tendrá que ser ~ 60% más largo para lograr el mismo contraste a mitad de camino, mientras que mi intento solo tiene que ser ~ 30% más largo. La idea es evitar que la imagen se oscurezca más de lo necesario, pero aun así se mezcla suavemente con ella.
Las dos mallas comparadas con un degradado lineal simple.
He optado por no incluir la malla de Material Design, ya que es casi idéntica a la más bonita. easeOutSine. Podemos comparar como linear-gradient , mi scrim-gradient y ease-out-sine-gradient mira aquí:
Mezcla de ambos extremos
En el ejemplo de la malla, solo necesitamos mezclar un extremo mientras el otro termina con la imagen. A veces, necesitamos mezclarnos en ambos extremos, y ahí es donde funcionan las funciones de suavizado, como easeInOutSine Viene muy bien.
Aproximación de gradiente lineal frente a facilidad de entrada y salida sinusoidal.
Usando un easeInOut función, nos aseguramos de que tanto la transición de colorA a degradado como de degradado a colorB sea lo más suave posible. El mismo principio se ilustra en este lápiz:
Ver la pluma.
Cómo dibujar los degradados
En YouTube, hay un degradado detrás de los controles cuando pasas el cursor sobre un video. Se crea usando un PNG base64. Esta técnica también funciona muy bien, pero no se puede automatizar ni modificar fácilmente.
Captura de pantalla de YouTube (el artista es Wintergatan).
La mayoría de los otros lugares usan linear-gradient(hsla(0, 0%, 0%, 0.8), transparent) donde el alfa de inicio la mayoría de las veces está entre 0,6 y 0,8. Esto resuelve el problema de hacer que el texto sea legible, pero el degradado resultante es muy prominente. Un ejemplo de esto es BBC, donde intenté usar el degradado de malla en su lugar:
Capturas de pantalla de BBC con degradado lineal (izquierda) y degradado de malla (derecha).
PostCSS al rescate
Creé un complemento que crea estos degradados para mí. Esta es la sintaxis:
scrim-gradient(
black,
transparent
);se convierte en:
linear-gradient(
hsl(0, 0%, 0%) 0%,
hsla(0, 0%, 0%, 0.738) 19%,
hsla(0, 0%, 0%, 0.541) 34%,
hsla(0, 0%, 0%, 0.382) 47%,
hsla(0, 0%, 0%, 0.278) 56.5%,
hsla(0, 0%, 0%, 0.194) 65%,
hsla(0, 0%, 0%, 0.126) 73%,
hsla(0, 0%, 0%, 0.075) 80.2%,
hsla(0, 0%, 0%, 0.042) 86.1%,
hsla(0, 0%, 0%, 0.021) 91%,
hsla(0, 0%, 0%, 0.008) 95.2%,
hsla(0, 0%, 0%, 0.002) 98.2%,
hsla(0, 0%, 0%, 0) 100%
);El principio subyacente es por el que hemos pasado: combinar funciones de aceleración y múltiples paradas de color para crear aproximaciones que se ven más suaves que los gradientes lineales simples.
En realidad, el degradado de malla de arriba se genera usando un conjunto personalizado de coordenadas, pero si miramos los gradientes de suavizado como ease-in-out-sine-gradient los pasos son:
- Ejecute .css (o .pcss) y búsquelo.
- Genere coordenadas distribuidas uniformemente a lo largo de la curva sinusoidal de entrada y salida.
- Utilice estas coordenadas para crear paradas de color. La coordenada x determina la proporción de mezcla de colores y la coordenada y determina la posición de parada del color.
- Reemplace el gradiente de suavizado con el gradiente lineal generado.
Valores de coordenadas de facilidad de entrada-salida sinusoidal generados en el paso 2.
El complemento actualmente tiene dos configuraciones opcionales:
precision– se correlaciona con el número de paradas de color generadasalphaDecimals– establece el número de decimales utilizados en elhsla()valores alfa
El complemento: postcss-easing-gradients
En general, estoy bastante contento con el resultado. Cosas que estoy considerando agregar:
- ¿Versión Sass? Ya no lo uso. ¿Quizás a alguien más le gustaría escribir uno?
- Las coordenadas utilizadas para mezclar los colores de las paradas de color se distribuyen uniformemente sobre las curvas de aceleración. Idealmente, la distancia entre las paradas de color sería relativamente más corta donde el cambio delta en la curvatura es mayor.
- ¿Quizás ustedes tienen algunas ideas?
Puede encontrarlo en GitHub, NPM y como plantilla en CodePen. ¡Juega con él! Sus contribuciones y sugerencias son bienvenidas.
CSS
Preferiblemente, me gustaría poder escribir algo como ease-in-out-gradient(#bada55, transparent) y haga que el navegador lo comprenda sin tener que realizar ningún procesamiento CSS personalizado.
Referencias / lectura adicional
- Chris Coyer: Consideraciones de diseño: texto en imágenes
- Patrick Brosset: ¿De verdad conoces los gradientes lineales de CSS?
- MDN: Especificación de gradiente lineal
- Marcus Tisäter: Entonces quieres hacer un complemento PostCSS
- GitHub: PostCSS Plugin Boilerplate
- Jonathan Neal: CodePen con cualquier complemento PostCSS