Statische ruis maken van een rare CSS-gradiëntbug

👋 De demo's in dit artikel experimenteren met een niet-standaard bug met betrekking tot CSS-gradiënten en subpixelweergave. Hun gedrag kan op elk moment in de toekomst veranderen. Ze zijn ook zo zwaar. We bieden ze asynchroon aan, waarbij u klikt om te laden, maar we willen u toch een waarschuwing geven voor het geval uw laptopventilator begint te draaien.

Herinner je je die statische ruis op oude tv's zonder signaal? Of wanneer het signaal slecht is en het beeld vervormd is? In het geval dat het concept van een tv-signaal dateert van voor jou, is hier een GIF die precies laat zien wat ik bedoel.

Afbeelding bekijken (bevat automatisch afspelende media)

Ja, we gaan zoiets doen met alleen CSS. Dit is wat we maken:

Voordat we in de code gaan graven, wil ik zeggen dat er betere manieren zijn om een ​​statisch ruiseffect te creëren dan de methode die ik je ga laten zien. We kunnen SVG gebruiken, filter eigendom, enz. In feite schreef Jimmy Chion een goed artikel laten zien hoe het met SVG moet.

Wat ik hier ga doen, is een soort CSS-experiment om enkele trucs te onderzoeken die gebruikmaken van een bug met verlopen. Je kunt het voor de lol in je zijprojecten gebruiken, maar het gebruik van SVG is schoner en geschikter voor een echt project. Bovendien gedraagt ​​het effect zich verschillend in verschillende browsers, dus als u deze bekijkt, kunt u ze het beste bekijken in Chrome, Edge of Firefox.

Laten we wat geluid maken!

Om dit ruiseffect te maken, gaan we ... hellingen gebruiken! Nee, er is geen geheim ingrediënt of nieuwe eigenschap die dit mogelijk maakt. We gaan dingen gebruiken die al in onze CSS-toolbox zitten!

De "truc" is gebaseerd op het feit dat gradiënten slecht zijn in anti-aliasing. Ken je dat soort gekartelde randen die we krijgen bij het gebruik van harde stopkleuren? Ja, ik praat over hen in de meeste mijn artikelen omdat ze een beetje vervelend zijn en we altijd een paar pixels moeten toevoegen of verwijderen om de zaken glad te strijken:

Zoals je kunt zien, wordt de tweede cirkel beter weergegeven dan de eerste omdat er een klein verschil is (0.5%) tussen de twee kleuren in het verloop in plaats van een rechte harde kleurstop te gebruiken met waarden van hele getallen, zoals de eerste cirkel.

Hier is nog een blik, deze keer met behulp van een conic-gradient waar het resultaat duidelijker is:

Een interessant idee kwam bij me op toen ik deze demo's aan het maken was. Waarom probeert u niet het tegenovergestelde te doen in plaats van de vervorming de hele tijd te corrigeren? Ik had geen idee wat er zou gebeuren, maar het was een leuke verrassing! Ik nam de conische gradiëntwaarden en begon ze te verlagen om de slechte anti-aliasing-resultaten er nog erger uit te laten zien.

Zie je hoe slecht de laatste is? Het is een soort scrambled in het midden en niets is glad. Laten we het schermvullend maken met kleinere waarden:

Ik veronderstel dat je ziet waar dit heen gaat. We krijgen een vreemd vervormd beeld wanneer we zeer kleine decimale waarden gebruiken voor de harde kleurenstops in een verloop. Ons geluid is geboren!

We zijn nog ver verwijderd van de korrelige ruis die we willen, omdat we nog steeds de daadwerkelijke conische gradiënt kunnen zien. Maar we kunnen de waarden verlagen tot heel, heel kleine, zoals 0.0001% - en plotseling is er geen verloop meer maar pure korreligheid:

Tadaa! We hebben een ruiseffect en het enige dat nodig is, is één CSS-gradiënt. Ik wed dat als ik je dit zou laten zien voordat ik het uitleg, je nooit zou beseffen dat je naar een verloop kijkt. Je moet heel goed naar het midden van het verloop kijken om het te zien.

We kunnen de willekeur vergroten door de grootte van het verloop erg groot te maken terwijl we de positie ervan aanpassen:

Het verloop wordt toegepast op een vast 3000px plein en geplaatst op de 60% 60% coördinaten. We kunnen het midden ervan in dit geval nauwelijks opmerken. Hetzelfde kan ook worden gedaan met een radiaal verloop:

En om de dingen nog willekeuriger te maken (en dichter bij een echt ruiseffect te komen), kunnen we zowel gradiënten als gebruik combineren background-blend-mode om dingen glad te strijken:

Ons geluidseffect is perfect! Zelfs als we goed naar elk voorbeeld kijken, is er geen spoor van een van beide gradiënten, maar eerder mooie korrelige statische ruis. We hebben zojuist die anti-aliasing-bug omgezet in een gelikte functie!

Nu we dit hebben, laten we een paar interessante voorbeelden bekijken waar we het zouden kunnen gebruiken.

Geanimeerd geen tv-signaal

Terugkomend op de demo waarmee we begonnen:

Als je de code controleert, zul je zien dat ik een CSS-animatie gebruik op een van de verlopen. Het is echt zo simpel als dat! Het enige wat we doen is de positie van de conische gradiënt razendsnel verplaatsen (.1s) en dit is wat we krijgen!

Ik heb dezelfde techniek gebruikt bij een eendelige CSS-kunstuitdaging:

Korrelig beeldfilter

Een ander idee is om de ruis toe te passen op een afbeelding om een ​​ouderwetse look te krijgen. Beweeg over elke afbeelding om ze zonder ruis te zien.

Ik gebruik slechts één verloop op een pseudo-element en vermeng het met de afbeelding, dankzij mix-blend-mode: overlay.

We kunnen een nog grappiger effect krijgen als we de CSS gebruiken filter eigendom

En als we een toevoegen mask aan de mix kunnen we nog meer effecten maken!

Korrelige tekstbehandeling

We kunnen hetzelfde effect ook op tekst toepassen. Nogmaals, alles wat we nodig hebben is een paar geketende hellingen op a background-image en meng vervolgens de achtergronden. Het enige verschil is dat we er ook naar reiken background-clip dus het effect wordt alleen toegepast op de grenzen van elk teken.

generatieve kunst

Als je blijft spelen met de gradiëntwaarden, krijg je mogelijk meer verrassende resultaten dan een eenvoudig ruiseffect. We kunnen enkele willekeurige vormen krijgen die veel op elkaar lijken generatieve kunst!

Natuurlijk zijn we verre van echte generatieve kunst, die veel werk vereist. Maar het is nog steeds bevredigend om te zien wat er kan worden bereikt met iets dat technisch gezien als een bug wordt beschouwd!

Monsterlijk gezicht

Een laatste voorbeeld waar ik voor heb gemaakt CodePens divtober 2022 collectie:

Afsluiten

Ik hoop dat je genoten hebt van dit kleine CSS-experiment. We hebben niet bepaald iets "nieuws" geleerd, maar we hebben een kleine eigenaardigheid met hellingen genomen en er iets leuks van gemaakt. Ik zeg het nog een keer: dit is niet iets dat ik zou overwegen om in een echt project te gebruiken want wie weet of en wanneer anti-aliasing ooit zal worden aangepakt. In plaats daarvan was dit een heel willekeurige en aangename verrassing toen ik er tegenaan liep. Het is ook niet zo eenvoudig te bedienen en het gedraagt ​​zich inconsistent in verschillende browsers.

Dit gezegd hebbende, ik ben benieuwd wat je ermee kunt doen! Je kunt met de waarden spelen, verschillende lagen combineren, een filterof mix-blend-mode, of wat dan ook, en je krijgt zeker iets heel cools. Deel je creaties in het commentaargedeelte — er zijn geen prijzen, maar we kunnen wel een mooie collectie op gang brengen!