Gradientes granulados | Programar Plus

0

Navegue a través de Dribbble o Behance y encontrará diseñadores que utilizan una técnica simple para agregar textura a una imagen: ruido. Agregar ruido hace que los colores sólidos o los degradados suaves, como las sombras, sean más realistas. Pero a pesar de la afinidad de los diseñadores por la textura, el ruido rara vez se utiliza en el diseño web.

En este artículo, generaremos ruido colorido para agregar textura a un degradado con solo una pequeña cantidad de CSS y SVG. Muy bien, ¡hagamos algo de ruido!

Ilustración de Hank Washington en Behance

Ilustración de Jordan Kay en Dribbble

Zona de juegos interactiva

Compruébalo aquí. La forma más rápida de comprender lo que está sucediendo es jugar con los parámetros que componen las capas.

El truco: ruido SVG y degradados CSS

La técnica principal de este artículo se basa en una respuesta de Stack Overflow de Chris Pachl a la pregunta: ¿Puede agregar ruido a un gradiente CSS?

El truco consiste en usar un filtro SVG para crear el ruido y luego aplicar ese ruido como fondo. Colóquelo debajo de un degradado, aumente el brillo y el contraste, y eso es todo: tiene un degradado que se desvanece gradualmente.

Los ingredientes clave

Esto es con lo que estamos trabajando bajo el capó:

  • Turbulencia SVG: Este es nuestro filtro de ruido.
  • Fondo con degradado y SVG: A continuación, colocamos ese filtro en CSS como una imagen de fondo que combina el filtro con un degradado de CSS.
  • Aumenta el brillo y el contraste: Luego pasamos a CSS filter para aumentar el brillo y el contraste del ruido.
  • Mezclar degradados: Finalmente, usamos opcionalmente mix-blend-mode para filtrar aún más los colores y mezclar degradados.

Veamos en detalle cada una de estas partes.

Usando turbulencia SVG

Dentro del ámbito de SVG, podemos definir filtros, y uno de esos filtros nos permite crear ruido Perlin. Se llama <feTurbulence> y podemos definir atributos, como si es “turbulencia” o “ruido” y qué tan fino o grueso es. Bence Szabó lo explica con mucho más detalle mientras demuestra cómo se puede utilizar para crear patrones.

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <filter id='noiseFilter'>
    <feTurbulence 
      type="fractalNoise" 
      baseFrequency='0.65' 
      numOctaves="3" 
      stitchTiles="stitch" />
  </filter>

  <rect width="100%" height="100%" filter="url(#noiseFilter)" />
</svg>

Este ejemplo de SVG crea un filtro y muestra un <rect> elemento que podemos usar para nuestros degradados granulados. Observe que el SVG <filter> se define por separado de la <rect>, y el <rect> simplemente lo referencia.

Juega cambiando algunas de las propiedades de <feTurbulence>

Vamos a guardar este SVG como un archivo separado. Hacemos referencia a un enlace externo para obtener el SVG en las demostraciones a lo largo de este artículo. Sin embargo, en la práctica, haría referencia a un archivo local o su propio CDN. No funciona hacer referencia al SVG por su id en CSS, por alguna razón peculiar, pero puede incorporar el SVG, como mostramos en la demostración del patio de recreo. No hacemos esto en las demostraciones por razones de legibilidad.

Creando un CSS background con SVG y un degradado

Una vez que tengamos el archivo SVG almacenado en algún lugar, podemos hacer referencia a él mediante una URL o ruta, ahora podemos usarlo en un CSS background, combinado con un degradado.

.noise {
  /* ... */
  background:
    linear-gradient(to right, blue, transparent),
    url(https://grainy-gradients.vercel.app/noise.svg);
}

El orden importa aquí. En este ejemplo particular, queremos que un color sólido (es decir, sin ruido) se convierta en ruido y luego en otro color. También queremos que un extremo del degradado sea transparente para que se vea el ruido.

Como esto:

Sin embargo, esto no es particularmente agradable porque el ruido es demasiado confuso. Necesitamos deshilacharlo y hacerlo más granulado. Podemos hacer eso por …

Aumentando el brillo y el contraste

Agregar un CSS filter hace que el ruido sea más fuerte, empujando los colores más descoloridos hacia el blanco o el negro. El filtro se aplica a todo <div>, por lo que el azul más a la izquierda es un azul diferente al azul puro con el que comenzamos.

.noise {
  /* ... */
  background: 
    linear-gradient(to right, blue, transparent), 
    url(https://grainy-gradients.vercel.app/noise.svg);
  filter: contrast(170%) brightness(1000%);  
}

Puede jugar con cómo el contraste y el brillo afectan el degradado. Aumentar el brillo y el contraste elimina los grises confusos en la siguiente demostración.

El ruido no es de color uniforme.

Si hace zoom, notará que el ruido se compone de muchos colores. El filtro SVG era colorido al principio, y el aumento del brillo y el contraste enfatizaba ciertos colores. Aunque apenas se note, si este confeti no es bienvenido, podemos continuar filtrando colores con la combinación de CSS (es decir, mix-blend-mode y background-blend-mode ).

Combinación de CSS

Hagamos un degradado granulado que cambie entre dos colores. La combinación de CSS nos permite apilar capas de color. En el siguiente ejemplo, agregamos otro <div> al marcado, colocándolo sobre el degradado original, luego aplicando mix-blend-mode: multiply; para suavizar las cosas.

<section>
  <div class="isolate">
    <div class="noise"></div>
    <div class="overlay"></div>
  </div>
</section>
.noise {
  /* ... */
  background: 
    linear-gradient(20deg, rebeccapurple, transparent), 
    url(https://grainy-gradients.vercel.app/noise.svg); 
  contrast(170%) brightness(1000%);
}
.overlay {
  /* ... */
  background: moccasin;
  mix-blend-mode: multiply;
}

Podemos usar el CSS isolation propiedad para crear un nuevo contexto de apilamiento y elegir qué se mezcla. Si tuviéramos que dejar de lado isolation en el siguiente ejemplo, el degradado y la superposición se combinarían con el color de fondo. ¡Pruébalo en el Pen y comenta esa línea!

/* Same as before */

.isolate {
  isolation: isolate;
  /* ... */
}

Algunos casos de uso

Hemos visto un ejemplo bastante simple de cómo hacer un degradado ruidoso, pero ¿dónde podría usar uno? Consideremos varios casos de uso.

Luz y sombras, con grano

¿Dónde ocurren naturalmente los degradados? Luz y sombras, para uno. Podemos aprovechar la propiedad CSS mix-blend-mode para mezclar degradados suavemente y filtrar selectivamente los colores que queremos ver en el ruido.

En el ejemplo de “sombra”, creamos un degradado oscuro y lo invertimos para crear el efecto en el ejemplo de “luz”. En ambos casos, mix-blend-mode nos permite mezclarlo con otros degradados.

Lámina holográfica

El drástico aumento de brillo y contraste crea un efecto de arco iris que recuerda a la lámina holográfica.

Llevando las cosas más lejos

Prueba el patio de recreo y juega con los diferentes parámetros para ver cómo afectan la textura.

Más allá de eso, aquí hay algunas formas de seguir jugando con esta técnica:

  • Utilice un SVG diferente: Todos los degradados de este artículo utilizan el mismo SVG, pero puedes jugar con los parámetros que generan el ruido para ajustar la aspereza y la apariencia en el patio de recreo.
  • Prueba diferentes gradientes: además linear-gradient, CSS ofrece cuatro tipos más de degradados. ¿Puede usted nombrarlos? (Aquí hay uno.)
  • Agrega más capas: Con la combinación de CSS, puede apilar tantas capas como desee y mezclarlas.
  • Aplicar diferentes filtros SVG: Hay todo tipo de filtros, incluido el desenfoque gaussiano y diferentes tipos de iluminación. Además, se pueden hacer referencia a ellos en un filtro CSS y aplicarse a cualquier elemento además de SVG.

¿Qué más se te ocurre? Háganos saber lo que descubrió en los comentarios.

Soporte del navegador

No podemos dejar de hablar de compatibilidad con navegadores aquí. El núcleo de esta técnica es compatible con todos los navegadores modernos. Como era de esperar, no funciona en Internet Explorer. Dicho esto, Internet Explorer admite SVG como fondo en CSS (pero no con el CSS real filter propiedad).

SVG como imagen de fondo CSS

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.

Escritorio

Cromo Firefox ES DECIR Borde Safari
5 24 9 dieciséis 5

Móvil / Tableta

Android Chrome Android Firefox Androide Safari de iOS
96 95 3 4.2-4.3

Efectos de filtro CSS

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.

Escritorio

Cromo Firefox ES DECIR Borde Safari
18 * 35 No 79 6 *

Móvil / Tableta

Android Chrome Android Firefox Androide Safari de iOS
96 95 4,4 * 6.0-6.1 *

También he notado que los navegadores basados ​​en Blink (por ejemplo, Chrome) y uno basado en WebKit (por ejemplo, Safari) implementan mix-blend-mode ligeramente diferente, así que asegúrese de probar en todos los navegadores si usa la combinación de CSS. En mis propios proyectos, he utilizado consultas de medios específicas del navegador para reconciliar manualmente las diferencias visuales con pequeños ajustes en CSS.

¡Eso es! Ahora que comprende los filtros SVG y cómo combinarlos con los filtros CSS como fondo, tiene otro efecto visual genial para agregar profundidad y textura a un diseño.