Faire du bruit statique d'un bug de gradient CSS étrange

Cet article explore un bug de gradient CSS original qui crée un effet de bruit statique, similaire aux vieux écrans de télévision avec une mauvaise réception. Bien qu'il ne s'agisse pas d'une technique prête pour la production, c'est une expérience CSS amusante.

L'auteur note qu'il existe de meilleures méthodes (SVG, toile, filtres), mais cette approche exploite la mauvaise anti-aliasage d'un gradient. Le «truc» consiste à manipuler des gradients coniques et radiaux avec des valeurs d'arrêt de couleur extrêmement petites, créant une texture granuleuse. L'effet est fortement dépendant du navigateur; Chrome, Edge et Firefox sont recommandés.

L'article montre comment les ajustements subtils des valeurs de gradient modifient considérablement la sortie visuelle. En utilisant de minuscules valeurs décimales (par exemple, 0,0001%), le gradient lui-même devient presque invisible, ne laissant que le bruit granuleux. Une randomisation supplémentaire est réalisée en élargissant le gradient et en ajustant sa position. Combiner les gradients avec background-blend-mode affine l'effet.

Plusieurs applications sont présentées:

• Animé "Aucun signal": Une animation CSS déplace subtilement la position du gradient, simulant le scintillement statique.
• Filtre d'image granuleux: Le bruit est appliqué sous forme de pseudo-élément, mélangé à une image utilisant mix-blend-mode: overlay pour un effet vintage. Les filtres CSS améliorent cela davantage.
• Texte granuleux: La technique est appliquée au texte, en utilisant background-clip pour limiter l'effine aux limites de caractère.
• Art génératif: Expérimenter avec les valeurs de gradient donne des modèles inattendus, presque génératifs.

L'article conclut en soulignant que cette méthode est principalement pour l'expérimentation et le plaisir, et non pour une utilisation en production en raison de son instabilité et de ses incohérences du navigateur. Les lecteurs sont encouragés à explorer les variations et à partager leurs résultats.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!