👋 Demoerne i denne artikel eksperimenterer med en ikke-standardfejl relateret til CSS-gradienter og sub-pixel-gengivelse. Deres adfærd kan ændre sig når som helst i fremtiden. De er også tunge som pokker. Vi serverer dem asynkront, hvor du klikker for at indlæse, men vil stadig give dig et heads-up, hvis din bærbare blæser begynder at snurre.
Kan du huske den statiske støj på gamle tv'er uden signal? Eller når signalet er dårligt og billedet er forvrænget? Hvis konceptet med et tv-signal går forud for dig, er her en GIF, der viser præcis, hvad jeg mener.
Vis billede (indeholder automatisk afspillende medier)
Ja, vi vil gøre noget som dette ved kun at bruge CSS. Her er hvad vi laver:
Før vi begynder at grave i koden, vil jeg sige, at der er bedre måder at skabe en statisk støjeffekt på end den metode, jeg vil vise dig. Vi kan bruge SVG, , filter ejendom osv. Faktisk skrev Jimmy Chion en god artikel viser, hvordan man gør det med SVG.
Det, jeg vil gøre her, er et slags CSS-eksperiment for at udforske nogle tricks, der udnytter en fejl med gradienter. Du kan bruge det på dine sideprojekter for sjov, men at bruge SVG er renere og mere velegnet til et rigtigt projekt. Plus, effekten opfører sig forskelligt på tværs af browsere, så hvis du tjekker disse ud, er det bedst at se dem i Chrome, Edge eller Firefox.
Lad os lave noget støj!
For at lave denne støjeffekt vil vi bruge… gradienter! Nej, der er ingen hemmelig ingrediens eller ny ejendom, der får det til at ske. Vi kommer til at bruge ting, der allerede er i vores CSS-værktøjskasse!
"Tricket" er afhængigt af, at gradienter er dårlige til anti-aliasing. Du kender den slags takkede kanter, vi får, når vi bruger hårde stopfarver? Ja, jeg taler om dem i de fleste af mine artikler fordi de er lidt irriterende, og vi skal altid tilføje eller fjerne et par pixels for at udjævne tingene:
Som du kan se, gengives den anden cirkel bedre end den første, fordi der er en lille forskel (0.5%) mellem de to farver i gradienten i stedet for at bruge et direkte hårdt farvestop ved at bruge hele talværdier som den første cirkel.
Her er endnu et kig, denne gang ved hjælp af en conic-gradient hvor resultatet er mere tydeligt:
En interessant idé slog mig, mens jeg lavede disse demoer. I stedet for at rette op på forvrængningen hele tiden, hvorfor så ikke prøve at gøre det modsatte? Jeg anede ikke, hvad der ville ske, men det var en sjov overraskelse! Jeg tog de koniske gradientværdier og begyndte at reducere dem for at få de dårlige anti-aliasing-resultater til at se endnu værre ud.
Kan du se, hvor dårlig den sidste er? Det er en slags krypteret i midten, og intet er glat. Lad os gøre det i fuld skærm med mindre værdier:
Jeg formoder, at du kan se, hvor det går hen. Vi får et mærkeligt forvrænget visuelt, når vi bruger meget små decimalværdier for de hårde farvers stop i en gradient. Vores støj er født!
Vi er stadig langt fra den kornede støj, vi ønsker, fordi vi stadig kan se den faktiske koniske gradient. Men vi kan reducere værdierne til meget, meget små - f.eks 0.0001% — og pludselig er der ikke mere gradient, men ren kornethed:
Tada! Vi har en støjeffekt, og det eneste, der skal til, er en CSS-gradient. Jeg vil vædde på, at hvis jeg skulle vise dig det, før jeg forklarede det, ville du aldrig indse, at du ser på en gradient. Du skal se meget omhyggeligt i midten af gradienten for at se det.
Vi kan øge tilfældigheden ved at gøre størrelsen af gradienten meget stor, mens vi justerer dens position:
Gradienten anvendes på en fast 3000px firkantet og placeret ved 60% 60% koordinater. Vi kan næsten ikke bemærke dens centrum i dette tilfælde. Det samme kan også gøres med radial gradient:
Og for at gøre tingene endnu mere tilfældige (og tættere på en rigtig støjeffekt) kan vi kombinere både gradienter og brug background-blend-mode at udjævne tingene:
Vores støjeffekt er perfekt! Selvom vi ser nøje på hvert eksempel, er der ingen spor af nogen af de to gradienter derinde, men derimod smuk kornet statisk støj. Vi har lige forvandlet den anti-aliasing-fejl til en smart funktion!
Nu hvor vi har dette, lad os se et par interessante eksempler, hvor vi kan bruge det.
Animeret intet tv-signal
For at komme tilbage til den demo, vi startede med:
Hvis du tjekker koden, vil du se, at jeg bruger en CSS-animation på en af gradienterne. Det er virkelig så enkelt som det! Det eneste, vi gør, er at flytte keglegradientens position med en lynhurtig varighed (.1s), og det er hvad vi får!
Jeg brugte den samme teknik på en en-div CSS-kunstudfordring:
Kornet billedfilter
En anden idé er at anvende støjen på et billede for at få et gammeldags look. Hold musen over hvert billede for at se dem uden støj.
Jeg bruger kun én gradient på et pseudo-element og blander det med billedet, takket være mix-blend-mode: overlay.
Vi kan få en endnu sjovere effekt, hvis vi bruger CSS filter ejendom
Og hvis vi tilføjer en mask til blandingen kan vi lave endnu flere effekter!
Kornet tekstbehandling
Vi kan også anvende den samme effekt på tekst. Igen, alt hvad vi behøver er et par lænkede gradienter på en background-image og bland derefter baggrundene. Den eneste forskel er, at vi også stræber efter background-clip så effekten anvendes kun på grænserne for hvert tegn.
Generativ kunst
Hvis du bliver ved med at lege med gradientværdierne, får du muligvis mere overraskende resultater end en simpel støjeffekt. Vi kan få nogle tilfældige former, der ligner meget generativ kunst!
Vi er selvfølgelig langt fra rigtig generativ kunst, som kræver meget arbejde. Men det er stadig tilfredsstillende at se, hvad der kan opnås med noget, der teknisk set betragtes som en fejl!
Monster ansigt
Et sidste eksempel, jeg lavede til CodePen's divtober 2022 samling:
Indpakning op
Jeg håber, du nød dette lille CSS-eksperiment. Vi lærte ikke ligefrem noget "nyt", men vi tog en lille finurlighed med gradienter og gjorde det til noget sjovt. Jeg siger det igen: dette er ikke noget, jeg ville overveje at bruge på et rigtigt projekt fordi hvem ved, om eller hvornår anti-aliasing vil blive behandlet på et tidspunkt. I stedet var dette en meget tilfældig og behagelig overraskelse, da jeg faldt ind i det. Det er heller ikke så nemt at kontrollere, og det opfører sig inkonsekvent på tværs af browsere.
Når det er sagt, er jeg nysgerrig efter at se, hvad du kan gøre med det! Du kan lege med værdierne, kombinere forskellige lag, bruge en filter eller mix-blend-mode, eller hvad som helst, og du vil helt sikkert få noget rigtig fedt. Del dine kreationer i kommentarfeltet - der er ingen præmier, men vi kan få gang i en flot indsamling!
