👋 Demoene i denne artikkelen eksperimenterer med en ikke-standard feil relatert til CSS-gradienter og underpikselgjengivelse. Deres oppførsel kan endres når som helst i fremtiden. De er også tunge som pokker. Vi serverer dem asynkront der du klikker for å laste, men ønsker fortsatt å gi deg beskjed i tilfelle laptopviften din begynner å snurre.
Husker du den statiske støyen på gamle TV-er uten signal? Eller når signalet er dårlig og bildet er forvrengt? I tilfelle konseptet med et TV-signal går før deg, her er en GIF som viser nøyaktig hva jeg mener.
Vis bilde (inneholder automatisk avspillende medier)
Ja, vi skal gjøre noe sånt som dette med kun CSS. Her er hva vi lager:
Før vi begynner å grave i koden, vil jeg si at det er bedre måter å skape en statisk støyeffekt på enn metoden jeg skal vise deg. Vi kan bruke SVG, den filter eiendom osv. Faktisk skrev Jimmy Chion en god artikkel viser hvordan du gjør det med SVG.
Det jeg skal gjøre her er et slags CSS-eksperiment for å utforske noen triks som utnytter en feil med gradienter. Du kan bruke den på sideprosjektene dine for moro skyld, men å bruke SVG er renere og mer egnet for et ekte prosjekt. Pluss at effekten oppfører seg forskjellig på tvers av nettlesere, så hvis du sjekker disse ut, er det best å se dem i Chrome, Edge eller Firefox.
La oss lage litt støy!
For å lage denne støyeffekten skal vi bruke… gradienter! Nei, det er ingen hemmelig ingrediens eller ny eiendom som får det til. Vi kommer til å bruke ting som allerede er i CSS-verktøykassen vår!
"Trikset" er avhengig av det faktum at gradienter er dårlige til å anti-aliasing. Du vet de slags taggete kantene vi får når vi bruker harde stoppfarger? Ja, jeg snakker om dem i de fleste artiklene mine fordi de er litt irriterende, og vi må alltid legge til eller fjerne noen få piksler for å jevne ut ting:
Som du kan se, gjengis den andre sirkelen bedre enn den første fordi det er en liten forskjell (0.5%) mellom de to fargene i gradienten i stedet for å bruke et direkte hardt fargestopp ved å bruke heltallsverdier som den første sirkelen.
Her er en annen titt, denne gangen med en conic-gradient hvor resultatet er tydeligere:
En interessant idé slo meg mens jeg laget disse demoene. I stedet for å fikse forvrengningen hele tiden, hvorfor ikke prøve å gjøre det motsatte? Jeg ante ikke hva som ville skje, men det var en morsom overraskelse! Jeg tok de koniske gradientverdiene og begynte å redusere dem for å få de dårlige anti-aliasing-resultatene til å se enda verre ut.
Ser du hvor dårlig den siste er? Det er en slags kryptert i midten og ingenting er glatt. La oss gjøre det i fullskjerm med mindre verdier:
Jeg antar at du ser hvor dette går. Vi får et merkelig forvrengt bilde når vi bruker veldig små desimalverdier for de harde fargene stopper i en gradient. Vår støy er født!
Vi er fortsatt langt unna den kornete støyen vi ønsker, fordi vi fortsatt kan se den faktiske koniske gradienten. Men vi kan redusere verdiene til veldig, veldig små - som 0.0001% — og plutselig er det ikke mer gradient, men ren kornethet:
Tada! Vi har en støyeffekt og alt som trengs er én CSS-gradient. Jeg vedder på at hvis jeg skulle vise deg dette før jeg forklarer det, ville du aldri innse at du ser på en gradient. Du må se veldig nøye i midten av gradienten for å se det.
Vi kan øke tilfeldigheten ved å gjøre størrelsen på gradienten veldig stor mens vi justerer posisjonen:
Gradienten brukes på en fast 3000px firkantet og plassert ved 60% 60% koordinater. Vi kan knapt legge merke til sentrum i dette tilfellet. Det samme kan gjøres med radiell gradient også:
Og for å gjøre ting enda mer tilfeldig (og nærmere en ekte støyeffekt) kan vi kombinere både gradienter og bruk background-blend-mode for å jevne ut ting:
Støyeffekten vår er perfekt! Selv om vi ser nøye på hvert eksempel, er det ingen spor av noen av de to gradientene der, men en vakker kornete statisk støy. Vi gjorde nettopp den anti-aliasing-feilen til en smart funksjon!
Nå som vi har dette, la oss se noen interessante eksempler der vi kan bruke det.
Animert ingen TV-signal
For å komme tilbake til demoen vi startet med:
Hvis du sjekker koden, vil du se at jeg bruker en CSS-animasjon på en av gradientene. Det er egentlig så enkelt som det! Alt vi gjør er å flytte kjeglegradientens posisjon med lynrask varighet (.1s) og dette er hva vi får!
Jeg brukte den samme teknikken på en en-div CSS kunstutfordring:
Kornet bildefilter
En annen idé er å bruke støy på et bilde for å få et gammeldags utseende. Hold markøren over hvert bilde for å se dem uten støy.
Jeg bruker bare en gradient på et pseudo-element og blander det med bildet, takket være mix-blend-mode: overlay.
Vi kan få en enda morsommere effekt hvis vi bruker CSS filter eiendom
Og hvis vi legger til en mask til blandingen kan vi lage enda flere effekter!
Kornete tekstbehandling
Vi kan bruke den samme effekten på tekst også. Igjen, alt vi trenger er et par lenkede gradienter på en background-image og bland deretter bakgrunnene. Den eneste forskjellen er at vi også strekker oss etter background-clip så effekten blir bare brukt på grensene til hvert tegn.
Generativ kunst
Hvis du fortsetter å leke med gradientverdiene, kan du få mer overraskende resultater enn en enkel støyeffekt. Vi kan få noen tilfeldige former som ligner mye på generativ kunst!
Vi er selvsagt langt fra ekte generativ kunst, som krever mye arbeid. Men det er fortsatt tilfredsstillende å se hva som kan oppnås med noe som teknisk sett anses som en feil!
Monsteransikt
Et siste eksempel jeg laget for CodePen sin divtober 2022 samling:
Innpakning opp
Jeg håper du likte dette lille CSS-eksperimentet. Vi lærte ikke akkurat noe "nytt", men vi tok en liten finurlighet med gradienter og gjorde det til noe morsomt. Jeg sier det igjen: dette er ikke noe jeg ville vurdert å bruke på et ekte prosjekt fordi hvem vet om eller når anti-aliasing vil bli tatt opp på et tidspunkt. I stedet var dette en veldig tilfeldig, og hyggelig, overraskelse da jeg snublet inn i den. Det er heller ikke så lett å kontrollere, og det oppfører seg inkonsekvent på tvers av nettlesere.
Når det er sagt, er jeg nysgjerrig på hva du kan gjøre med den! Du kan leke med verdiene, kombinere forskjellige lag, bruke en filtereller mix-blend-mode, eller hva som helst, og du vil garantert få noe veldig kult. Del kreasjonene dine i kommentarfeltet - det er ingen premier, men vi kan sette i gang en fin samling!
