Staatilise müra tekitamine veidrast CSS-i gradiendi veast

👋 Selle artikli demod katsetavad mittestandardset viga, mis on seotud CSS-i gradientide ja alampikslite renderdamisega. Nende käitumine võib tulevikus igal ajal muutuda. Nad on ka pagana rasked. Teenindame neid asünkrooniliselt, kus klõpsate laadimiseks, kuid tahame siiski hoiatada teid juhuks, kui teie sülearvuti ventilaator hakkab pöörlema.

Kas mäletate seda staatilist müra vanadel, ilma signaalita teleritel? Või kui signaal on halb ja pilt on moonutatud? Kui telesignaali kontseptsioon on teiest varasem, siis siin on GIF, mis näitab täpselt, mida ma mõtlen.

Vaata pilti (sisaldab automaatselt taasesitavat meediat)

Jah, me teeme midagi sellist, kasutades ainult CSS-i. Siin on see, mida me teeme:

Enne kui hakkame koodi süvenema, tahan öelda, et staatilise müraefekti loomiseks on paremaid viise kui meetod, mida ma teile näitan. Saame kasutada SVG-d, , filter vara jne. Tegelikult kirjutas Jimmy Chion a hea artikkel näitab, kuidas seda SVG-ga teha.

See, mida ma siin teen, on omamoodi CSS-i eksperiment, et uurida mõningaid nippe, kuidas gradientidega viga ära kasutada. Saate seda oma lõbu pärast oma kõrvalprojektides kasutada, kuid SVG kasutamine on puhtam ja sobivam pärisprojekti jaoks. Lisaks toimib efekt brauserites erinevalt, nii et kui te neid kontrollite, on parem vaadata neid Chrome'is, Edge'is või Firefoxis.

Teeme natuke lärmi!

Selle müraefekti tekitamiseks kasutame... gradiente! Ei, pole salajast koostisosa ega uut omadust, mis selle teoks teeb. Me hakkame kasutama asju, mis on juba meie CSS-i tööriistakastis!

"Nipp" tugineb tõsiasjale, et gradiendid on antialiasingus halvad. Kas teate, et sellised sakilised servad tekivad kõvade stoppvärvide kasutamisel? Jah, ma räägin neist enamikus minu artiklid kuna need on pisut tüütud ja asjade silumiseks peame alati mõne piksli lisama või eemaldama:

Nagu näete, kuvatakse teine ​​ring paremini kui esimene, kuna seal on väike erinevus (0.5%).

Siin on veel üks pilk, seekord kasutades a conic-gradient kus tulemus on ilmsem:

Neid demosid tehes tuli mulle huvitav idee. Selle asemel, et kogu aeg moonutusi parandada, miks mitte proovida teha vastupidist? Mul polnud aimugi, mis juhtuma hakkab, aga see oli lõbus üllatus! Võtsin koonuse gradiendi väärtused ja hakkasin neid vähendama, et halvad antialiasi tulemused veelgi halvemad näeksid.

Kas näete, kui halb viimane on? See on omamoodi keskelt rabatud ja miski pole sile. Teeme selle täisekraanil väiksemate väärtustega:

Ma arvan, et näete, kuhu see läheb. Me saame kummalise moonutatud visuaali, kui kasutame gradiendi kõvade värvipeatuste jaoks väga väikeseid kümnendväärtusi. Meie müra on sündinud!

Me oleme endiselt kaugel soovitud teralisest mürast, sest näeme endiselt tegelikku koonuse gradienti. Kuid me saame vähendada väärtusi väga-väga väikesteks - näiteks 0.0001% — ja järsku pole enam gradienti, vaid puhas teralisus:

Tada! Meil on müraefekt ja selleks on vaja ainult ühte CSS-i gradienti. Vean kihla, et kui peaksin seda teile enne selgitamist näitama, ei saaks te kunagi aru, et vaatate gradienti. Selle nägemiseks peate gradiendi keskpunkti väga hoolikalt vaatama.

Juhuslikkust saame suurendada, muutes gradiendi suuruse väga suureks, muutes selle asukohta:

Gradient rakendatakse fikseeritud 3000px ruut ja asetatud 60% 60% koordinaadid. Selle keset me sel juhul vaevalt märkame. Sama saab teha ka radiaalse gradiendiga:

Ja et muuta asjad veelgi juhuslikumaks (ja tõelisele müraefektile lähemale), saame kombineerida nii gradiente kui ka kasutust background-blend-mode asjade tasandamiseks:

Meie müraefekt on täiuslik! Isegi kui me vaatame iga näidet tähelepanelikult, pole seal kummastki gradiendist jälgegi, vaid pigem ilus teraline staatiline müra. Muutsime just selle antialiase vea lihtsaks funktsiooniks!

Nüüd, kui see on olemas, vaatame mõnda huvitavat näidet selle kasutamiseks.

Animeeritud ilma telesignaalita

Tulles tagasi demo juurde, millest alustasime:

Kui kontrollite koodi, näete, et kasutan ühel gradientidel CSS-animatsiooni. See on tõesti nii lihtne! Kõik, mida me teeme, on koonilise gradiendi positsiooni nihutamine välkkiirelt (.1s) ja see on see, mida me saame!

Kasutasin seda sama tehnikat ühe div CSS-i kunstiväljakutses:

Teralise pildi filter

Teine idee on rakendada pildile müra, et saada vana aja välimus. Hõljutage kursorit iga pildi kohta, et näha neid ilma mürata.

Kasutan pseudoelemendil ainult ühte gradienti ja segan selle pildiga, tänu mix-blend-mode: overlay.

CSS-i kasutamisel saame veelgi naljakama efekti filter kinnisvara

Ja kui lisame a mask segule saame luua veelgi rohkem efekte!

Teralise teksti töötlus

Sama efekti saame rakendada ka tekstile. Jällegi, kõik, mida me vajame, on paar aheldatud gradienti a-l background-image ja seejärel segada taustad. Ainus erinevus on see, et me ka jõudsime selle poole background-clip seega rakendatakse mõju ainult iga märgi piiridele.

Generatiivne kunst

Kui jätkate gradiendi väärtustega mängimist, võite saada üllatavamaid tulemusi kui lihtne müraefekt. Saame saada mõned juhuslikud kujundid, mis näevad välja väga sarnased generatiivne kunst!

Päris generatiivsest kunstist, mis nõuab palju tööd, oleme muidugi kaugel. Kuid siiski on hea meel näha, mida on võimalik saavutada millegagi, mida tehniliselt veaks peetakse!

Koletise nägu

Üks viimane näide, mille jaoks ma tegin CodePen Divtober 2022 kollektsioon:

Pakke kuni

Loodan, et teile meeldis see väike CSS-i eksperiment. Me ei õppinud täpselt midagi "uut", kuid tegime väikese veidruse gradientidega ja muutsime selle millekski lõbusaks. Ma ütlen uuesti: see ei ole midagi, mida ma pärisprojektis kasutaksin sest kes teab, kas või millal antialiasiga mingil ajahetkel tegeldakse. Selle asemel oli see väga juhuslik ja meeldiv üllatus, kui sellesse komistasin. Samuti pole seda nii lihtne juhtida ja see käitub brauserites ebajärjekindlalt.

See ütles: Mul on uudishimulik, mida saate sellega teha! Saab mängida väärtustega, kombineerida erinevaid kihte, kasutada a filtervõi mix-blend-mode, või mis iganes, ja saate kindlasti midagi väga lahedat. Jaga oma loomingut kommentaariumis – auhindu pole, aga saame kena kollektsiooni käima!