Creando ruido estático a partir de un extraño CSS Gradient Bug | trucos CSS

👋 Las demostraciones de este artículo experimentan con un error no estándar relacionado con los gradientes de CSS y la representación de subpíxeles. Su comportamiento puede cambiar en cualquier momento en el futuro. Además, son pesados ​​como el infierno. Los ofrecemos asincrónicos donde puede hacer clic para cargar, pero aún así quiero advertirle en caso de que el ventilador de su computadora portátil comience a girar.

¿Recuerdas ese ruido estático en los televisores viejos sin señal? ¿O cuando la señal es mala y la imagen está rota? En caso de que el concepto de una señal de TV dependa de usted, aquí hay un GIF que muestra exactamente lo que quiero decir.

ver la imagen (contiene medios de reproducción automática)

Sí, haremos algo similar usando solo CSS. Esto es lo que hacemos:

Antes de comenzar a profundizar en el código, quiero decir que hay mejores formas de crear un efecto de ruido estático que el método que les mostraré. Podemos usar SVG, <canvas>en filter propiedad etc De hecho, Jimmy Chion escribió un buen artículo mostrando cómo hacerlo con SVG.

Lo que voy a hacer aquí es una especie de experimento de CSS para explorar algunos trucos usando el error de gradientes. Puede usarlo en sus proyectos paralelos por diversión, pero usar SVG es más limpio y más adecuado para un proyecto real. Además, el efecto se comporta de manera diferente en diferentes navegadores, por lo que si los está revisando, es mejor verlos en Chrome, Edge o Firefox.

¡Hagamos ruido!

Para hacer este efecto de ruido, vamos a usar... ¡gradientes! No, no hay ningún ingrediente secreto o propiedad nueva que lo haga. ¡Usaremos cosas que ya están en nuestro kit de herramientas CSS!

El "número" se basa en el hecho de que los gradientes son malos para suavizar. ¿Conoces esos bordes dentados que obtenemos cuando usamos colores de puntos fijos? Sí, hablo de ellos en la mayoría de mis artículos porque son un poco molestos y Siempre tengo que agregar o eliminar algunos píxeles para suavizar las cosas:

Como puede ver, la segunda ronda se representa mejor que la primera porque hay una pequeña diferencia (0.5%) entre los dos colores en el degradado, en lugar de usar un color sólido recto, deje de usar números enteros como el primer círculo.

Aquí hay otra mirada, esta vez usando un conic-gradient donde el resultado es más obvio:

Se me ocurrió una idea interesante mientras hacía estas demostraciones. En lugar de corregir la distorsión todo el tiempo, ¿por qué no trato de hacer lo contrario? No tenía ni idea de lo que iba a pasar, ¡pero fue una sorpresa divertida! Tomé los valores de gradiente de conicidad y comencé a disminuirlos para que los malos resultados de suavizado se vieran aún peores.

¿Ves lo malo que es el último? Está un poco revuelto en el medio y nada es suave. Hagámoslo a pantalla completa con valores más pequeños:

Supongo que puedes ver a dónde va esto. Obtenemos una imagen visual extrañamente distorsionada cuando usamos valores decimales muy pequeños para las paradas de color duro en un degradado. ¡Nace nuestro ruido!

Todavía estamos lejos del ruido granulado que queremos porque todavía podemos ver el gradiente cónico real. Pero podemos reducir los valores a muy, muy pequeños, como 0.0001% — y de repente ya no hay gradiente, sino pura granulosidad:

¡Tada! Tenemos un efecto de ruido y todo lo que se necesita es un gradiente de CSS. Apuesto a que si te mostrara esto antes de explicarlo, nunca sabrías que estás viendo un gradiente. Tienes que mirar muy de cerca el centro del gradiente para verlo.

Podemos aumentar la aleatoriedad haciendo que el tamaño del degradado sea muy grande mientras ajustamos su posición:

El degradado se aplica en un fijo 3000px cuadrado y colocado sobre 60% 60% coordenadas, en este caso apenas podemos notar su centro, lo mismo se puede hacer con el gradiente radial:

Y para hacer las cosas aún más aleatorias (y más cercanas a un verdadero efecto de ruido), podemos combinar ambos gradientes y usar background-blend-mode para suavizar las cosas:

¡Nuestro efecto de ruido es perfecto! Incluso si miramos de cerca cada ejemplo, no hay rastro de ningún gradiente, sino más bien un hermoso ruido estático granulado. ¡Acabamos de convertir este error de suavizado en una característica ingeniosa!

Ahora que lo tenemos, veamos algunos ejemplos interesantes donde podemos usarlo.

Animado sin señal de TV

Volviendo a la demostración con la que comenzamos:

Si revisa el código, verá que estoy usando una animación CSS en uno de los degradados. ¡Es realmente así de simple! Todo lo que hacemos es mover la posición del gradiente cónico con una duración de rayo (.1s) y esto es lo que obtenemos!

Usé la misma técnica en un desafío de arte CSS de una sola subdivisión:

filtro de grano imagen

Otra idea es aplicar ruido a una imagen para obtener un aspecto antiguo. Pase el cursor sobre cada imagen para verla sin el ruido.

Solo uso un degradado en un pseudo elemento y lo mezclo con la imagen gracias a mix-blend-mode: overlay.

Podemos lograr un efecto aún más divertido si usamos CSS filter Propiedad

Y si le sumamos un mask a la mezcla, ¡podemos hacer aún más efectos!

Manejo de texto granulado

También podemos aplicar el mismo efecto al texto. Nuevamente, todo lo que necesitamos son algunos gradientes de cadena en background-image y luego mezcle los fondos. La única diferencia es que también alcanzamos background-clip por lo que el efecto solo se aplica a los bordes de cada símbolo.

arte generativo

Si sigues jugando con los valores de degradado, puedes obtener resultados más sorprendentes que un simple efecto de ruido. ¡Podemos obtener algunas formas aleatorias que se parecen mucho al arte generativo!

Por supuesto, estamos muy lejos del verdadero arte generativo, que requiere mucho trabajo, ¡pero aun así es satisfactorio ver lo que se puede lograr con algo que técnicamente se considera un error!

cara monstruosa

Un último ejemplo que hice CodePen colección diva octubre 2022:

resumiendo

Espero que hayas disfrutado este pequeño experimento CSS. No aprendimos exactamente nada "nuevo", pero tomamos un poco de rareza con los degradados y lo convertimos en algo divertido. Lo diré de nuevo: no es algo que consideraría usar en un proyecto real porque quién sabe si en algún momento se abordará el anti-aliasing o cuándo. En cambio, fue una sorpresa muy aleatoria y agradable cuando me topé con él. Tampoco es tan fácil de controlar y se comporta de manera inconsistente entre navegadores.

Dicho esto, ¡tengo curiosidad por ver qué puedes hacer con él! Puedes jugar con los valores, combinar diferentes capas, usar filtero mix-blend-modeo lo que sea, y seguramente terminarás con algo realmente genial. Comparte tus creaciones en la sección de comentarios. No hay premios, ¡pero podemos hacer una buena colección!