Faire du bruit statique à partir d'un étrange bogue de dégradé CSS

👋 Les démos de cet article expérimentent un bogue non standard lié aux dégradés CSS et au rendu des sous-pixels. Leur comportement peut changer à tout moment dans le futur. Ils sont aussi lourds que diable. Nous les servons de manière asynchrone là où vous cliquez pour charger, mais nous voulons toujours vous prévenir au cas où le ventilateur de votre ordinateur portable commencerait à tourner.

Vous souvenez-vous de ce bruit statique sur les vieux téléviseurs sans signal ? Ou lorsque le signal est mauvais et que l'image est déformée ? Au cas où le concept d'un signal TV est antérieur à vous, voici un GIF qui montre exactement ce que je veux dire.

Voir l'image (contient des médias à lecture automatique)

Oui, nous allons faire quelque chose comme ça en utilisant uniquement CSS. Voici ce que nous fabriquons :

Avant de commencer à creuser dans le code, je tiens à dire qu'il existe de meilleures façons de créer un effet de bruit statique que la méthode que je vais vous montrer. Nous pouvons utiliser SVG, , filter propriété, etc. En fait, Jimmy Chion a écrit un bon article montrant comment le faire avec SVG.

Ce que je vais faire ici est une sorte d'expérience CSS pour explorer quelques astuces tirant parti d'un bogue avec des dégradés. Vous pouvez l'utiliser sur vos projets parallèles pour le plaisir, mais l'utilisation de SVG est plus propre et plus adaptée à un projet réel. De plus, l'effet se comporte différemment selon les navigateurs, donc si vous les vérifiez, il est préférable de les afficher dans Chrome, Edge ou Firefox.

Faisons du bruit!

Pour faire cet effet de bruit nous allons utiliser… des dégradés ! Non, il n'y a pas d'ingrédient secret ou de nouvelle propriété qui rend cela possible. Nous allons utiliser des éléments déjà présents dans notre boîte à outils CSS !

Le "truc" repose sur le fait que les dégradés sont mauvais pour l'anticrénelage. Vous connaissez ce genre de bords dentelés que nous obtenons lorsque nous utilisons des couleurs d'arrêt dur? Oui, j'en parle dans la plupart des mes articles parce qu'ils sont un peu gênants et qu'il faut toujours rajouter ou enlever quelques pixels pour lisser les choses :

Comme vous pouvez le voir, le deuxième cercle rend mieux que le premier car il y a une petite différence (0.5%) entre les deux couleurs du dégradé plutôt que d'utiliser un arrêt de couleur dur direct en utilisant des valeurs de nombre entier comme le premier cercle.

Voici un autre regard, cette fois en utilisant un conic-gradient où le résultat est plus évident :

Une idée intéressante m'est venue pendant que je faisais ces démos. Au lieu de réparer la distorsion tout le temps, pourquoi ne pas essayer de faire le contraire ? Je n'avais aucune idée de ce qui allait se passer mais c'était une bonne surprise ! J'ai pris les valeurs de gradient conique et j'ai commencé à les diminuer pour rendre les mauvais résultats d'anticrénelage encore pires.

Voyez-vous à quel point le dernier est mauvais? C'est une sorte de brouillé au milieu et rien n'est lisse. Faisons-le en plein écran avec des valeurs plus petites :

Je suppose que vous voyez où cela mène. Nous obtenons un étrange visuel déformé lorsque nous utilisons de très petites valeurs décimales pour les arrêts de couleurs dures dans un dégradé. Notre bruit est né !

Nous sommes encore loin du bruit granuleux que nous souhaitons car nous pouvons toujours voir le gradient conique réel. Mais nous pouvons réduire les valeurs à des valeurs très, très petites - comme 0.0001% — et du coup il n'y a plus de dégradé mais du pur grain :

Tada ! Nous avons un effet de bruit et tout ce qu'il faut, c'est un dégradé CSS. Je parie que si je devais vous montrer cela avant de l'expliquer, vous ne réaliseriez jamais que vous regardez un dégradé. Vous devez regarder très attentivement le centre du dégradé pour le voir.

Nous pouvons augmenter le caractère aléatoire en rendant la taille du dégradé très grande tout en ajustant sa position :

Le dégradé est appliqué à un 3000px carré et placé au 60% 60% coordonnées. On peut à peine remarquer son centre dans ce cas. La même chose peut également être faite avec un dégradé radial :

Et pour rendre les choses encore plus aléatoires (et plus proches d'un effet de bruit réel), nous pouvons combiner les dégradés et utiliser background-blend-mode pour arranger les choses :

Notre effet de bruit est parfait ! Même si nous examinons attentivement chaque exemple, il n'y a aucune trace de l'un ou l'autre des gradients, mais plutôt un beau bruit statique granuleux. Nous venons de transformer ce bug d'anticrénelage en une fonctionnalité astucieuse !

Maintenant que nous avons cela, voyons quelques exemples intéressants où nous pourrions l'utiliser.

Animation sans signal TV

Revenons à la démo avec laquelle nous avons commencé :

Si vous vérifiez le code, vous verrez que j'utilise une animation CSS sur l'un des dégradés. C'est vraiment aussi simple que ça ! Tout ce que nous faisons est de déplacer la position du gradient conique à une durée ultra-rapide (.1s) et voilà ce qu'on obtient !

J'ai utilisé cette même technique sur un défi d'art CSS à une division :

Filtre d'image granuleux

Une autre idée consiste à appliquer le bruit à une image pour obtenir un aspect ancien. Survolez chaque image pour les voir sans le bruit.

J'utilise un seul dégradé sur un pseudo-élément et je le mélange avec l'image, grâce à mix-blend-mode: overlay.

Nous pouvons obtenir un effet encore plus amusant si nous utilisons le CSS filter propriété

Et si on ajoute un mask au mix, on peut faire encore plus d'effets !

Traitement du texte granuleux

Nous pouvons également appliquer ce même effet au texte. Encore une fois, tout ce dont nous avons besoin est de quelques dégradés enchaînés sur un background-image puis mélangez les arrière-plans. La seule différence est que nous recherchons également background-clip l'effet n'est donc appliqué qu'aux limites de chaque caractère.

Art génératif

Si vous continuez à jouer avec les valeurs de dégradé, vous pouvez obtenir des résultats plus surprenants qu'un simple effet de bruit. Nous pouvons obtenir des formes aléatoires qui ressemblent beaucoup à art génératif!

Bien sûr, on est loin du véritable art génératif, qui demande beaucoup de travail. Mais c'est toujours satisfaisant de voir ce qui peut être réalisé avec quelque chose qui est techniquement considéré comme un bug !

Visage de monstre

Un dernier exemple que j'ai fait pour CodePen's collection divtober 2022:

Emballage en place

J'espère que vous avez apprécié cette petite expérience CSS. Nous n'avons pas vraiment appris quelque chose de "nouveau", mais nous avons pris une petite bizarrerie avec les dégradés et l'avons transformé en quelque chose d'amusant. je le redis : ce n'est pas quelque chose que j'envisagerais d'utiliser sur un vrai projet car qui sait si ou quand l'anti-aliasing sera traité à un moment donné. Au lieu de cela, c'était une surprise très aléatoire et agréable quand je suis tombé dessus. Ce n'est pas non plus si facile à contrôler et il se comporte de manière incohérente d'un navigateur à l'autre.

Ceci dit, je suis curieux de voir ce que vous pouvez en faire ! Vous pouvez jouer avec les valeurs, combiner différentes couches, utiliser un filterou mix-blend-mode, ou quoi que ce soit, et vous obtiendrez à coup sûr quelque chose de vraiment cool. Partagez vos créations dans la section des commentaires - il n'y a pas de prix mais nous pouvons lancer une belle collection !