👋 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. También son pesados ​​como diablos. Los estamos sirviendo de forma asíncrona donde hace clic para cargar, pero aun así queremos avisarle 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á distorsionada? En caso de que el concepto de una señal de televisión sea anterior a usted, aquí hay un GIF que muestra exactamente lo que quiero decir.

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

Sí, vamos a hacer algo como esto usando solo CSS. Esto es lo que estamos haciendo:

Antes de que comencemos 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 voy a mostrar. Podemos usar SVG, <canvas>, el filter propiedad, etc. De hecho, Jimmy Chion escribió un buen artículo mostrando cómo hacerlo con SVG.

Lo que haré aquí es una especie de experimento de CSS para explorar algunos trucos que aprovechan un error con 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 los 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 posible. ¡Vamos a usar cosas que ya están en nuestra caja de herramientas CSS!

El "truco" se basa en el hecho de que los gradientes son malos para suavizar. ¿Conoces ese tipo de bordes dentados que obtenemos cuando usamos colores de tope duro? Sí, hablo de ellos en la mayoría de mis articulos porque son un poco molestos y siempre necesitamos agregar o quitar algunos píxeles para suavizar las cosas:

Como puede ver, el segundo círculo se representa mejor que el primero porque hay una pequeña diferencia (0.5%) entre los dos colores en el degradado en lugar de usar un color duro directo, deje de usar valores de 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 estaba haciendo estas demostraciones. En lugar de corregir la distorsión todo el tiempo, ¿por qué no intentar hacer lo contrario? No tenía idea de lo que sucedería, ¡pero fue una sorpresa divertida! Tomé los valores del gradiente cónico y comencé a disminuirlos para hacer que los malos resultados del suavizado se vieran aún peores.

¿Ves lo malo que es el último? Es una especie de revuelto por la mitad y nada es fluido. Hagámoslo a pantalla completa con valores más pequeños:

Supongo que ves a dónde va esto. Obtenemos una extraña imagen distorsionada cuando usamos valores decimales muy pequeños para las paradas de colores duros 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 disminuir los valores a valores muy, muy pequeños, como 0.0001% - y de repente no hay más degradado 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 te darías cuenta de que estás viendo un gradiente. Tienes que mirar con mucho cuidado en 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 gradiente se aplica a un fijo 3000px cuadrado y colocado en el 60% 60% coordenadas Apenas podemos notar su centro en este caso. Lo mismo se puede hacer con gradiente radial también:

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

¡Nuestro efecto de ruido es perfecto! Incluso si observamos detenidamente cada ejemplo, no hay rastro de ninguno de los gradientes, sino un hermoso ruido estático granulado. ¡Acabamos de convertir ese error de suavizado en una característica ingeniosa!

Ahora que tenemos esto, veamos algunos ejemplos interesantes donde podríamos 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 tan simple como eso! Todo lo que estamos haciendo es mover la posición del gradiente cónico a una duración ultrarrápida (.1s) y esto es lo que obtenemos!

Usé esta misma técnica en un desafío de arte CSS de una división:

Filtro de imagen granulada

Otra idea es aplicar el ruido a una imagen para obtener un aspecto antiguo. Pasa el cursor por cada imagen para verlas sin el ruido.

Estoy usando solo un degradado en un pseudoelemento y lo combino con la imagen, gracias a mix-blend-mode: overlay.

Podemos conseguir un efecto aún más divertido si usamos el CSS filter perfecta

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

Tratamiento de texto granulado

También podemos aplicar este mismo efecto al texto. Nuevamente, todo lo que necesitamos es un par de gradientes encadenados en un background-image y luego mezcle los fondos. La única diferencia es que también buscamos background-clip por lo que el efecto solo se aplica a los límites de cada carácter.

Arte generativo

Si continúa jugando con los valores de gradiente, puede obtener resultados más sorprendentes que un simple efecto de ruido. Podemos obtener algunas formas aleatorias que se parecen mucho a arte generativo!

Por supuesto, estamos lejos del verdadero arte generativo, que requiere mucho trabajo. ¡Pero sigue siendo satisfactorio ver lo que se puede lograr con algo que técnicamente se considera un error!

cara de monstruo

Un último ejemplo que hice para CodePen colección diciembre 2022:

Terminando

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

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

• Coinsmart. El mejor intercambio de Bitcoin y criptografía de Europa.Haga clic aquí
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/