# CSS-kohinatekstuuri: rakeisuutta liukuväreihin SVG:llä [Canonical HTML page](https://gradiently.design/fi/guide/css-noise-texture) Himmeä kohinakerros piilottaa juovittumisen ja saa tasaisen näytön värin tuntumaan painetulta tai filmiltä. Tässä sen takana oleva SVG-suodatin säädettynä ja liitettäväksi valmiina. ## The short version - CSS-kohinatekstuuri tehdään yleensä SVG:n feTurbulence-suodattimella, joka upotetaan pienenä data-URI-kuvana ja toistetaan liukuvärin päälle. - feTurbulencen baseFrequency määrää rakeen koon: suuremmat arvot antavat hienomman rakeen, pienemmät karkean, pilvisen kohinan. - Kohina toimii parhaiten liukuvärin päälle pseudoelementille asetettuna sekoitustilalla, kuten soft-light tai overlay, ja matalalla peittävyydellä. - Rakeisuus piilottaa liukuvärin juovittumisen, koska se rikkoo vierekkäisten sävyjen näkyvät reunat hienoksi, satunnaiseksi vaihteluksi. - Toistuva kohinakuva on kevyt renderöidä, kun taas elävän SVG-suodattimen käyttäminen suurella elementillä tai sen animointi maksaa paljon enemmän. **CSS-kohinatekstuuri** on hieno, satunnainen pilkutus värin tai liukuvärin päällä, joka antaa sille rakeisuutta. CSS:ssä ei ole kohinafunktiota, joten vakiolähde on SVG: `feTurbulence`-suodatin tuottaa kohinan, kääri sen pieneen SVG:hen, upota se data-URI:na ja toista se liukuvärisi päälle matalalla voimakkuudella. Tulos näyttää filmirakeelta tai painetulta paperilta, ja se korjaa hiljaa juovittumisen (banding), eli suurissa, pehmeissä liukuväreissä näkyvät portaat. Miksi rakeisuus saa värin näyttämään arvokkaammalta, kerrotaan oppaassa [rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients). Tämä opas on toteutus. ## SVG-kohinasuodatin ```html ``` 240 pikselin ruutu harmaata kohinaa. Tallenna se nimellä noise.svg tai upota alla näytetyllä tavalla. | Attribuutti | Arvo tässä | Mitä se ohjaa | | --- | --- | --- | | `type` | `fractalNoise` | Pehmeä, tasainen rae. `turbulence` antaa raidallisemman, aaltoilevan kohinan. | | `baseFrequency` | `0.8` | Rakeen koko. Noin 0,6 ja 0,9 välillä on hienoa rakeisuutta, 0,1 ja 0,3 välillä pilvistä. | | `numOctaves` | `3` | Yksityiskohtien kerrokset. Noin neljän jälkeen eroa on vaikea nähdä. | | `stitchTiles` | `stitch` | Saa ruudun reunat täsmäämään, joten toistoissa ei ole saumoja. | | `feColorMatrix` saturate 0 | `0` | Poistaa satunnaisen värin ja jättää harmaan rakeen. | Tärkeimmät asetukset. [MDN:n feTurbulence-viite](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) dokumentoi loput. ## Kohinan upottaminen data-URI:na Erillinen tiedosto toimii, mutta upottaminen säästää pyynnön ja pitää tehosteen yhdessä paikassa. Data-URI:ssa URL-osoitteissa merkitystä omaavat merkit täytyy koodata: `<` muuttuu muotoon `%3C`, `>` muotoon `%3E`, `#` muotoon `%23` ja `%` muotoon `%25`. Käytä SVG:n sisällä yksinkertaisia lainausmerkkejä, jotta ne eivät ole ristiriidassa URL:n ympärillä olevien kaksinkertaisten kanssa. ```css :root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ``` Sama ruutu mukautettuna ominaisuutena, jota voi käyttää missä tahansa. `#`:n koodaamatta jättäminen muotoon `%23` on yleinen syy siihen, ettei mitään näy Firefoxissa. ## Kohinan kerrostaminen liukuvärin päälle Aseta kohina pseudoelementille liukuvärin päälle ja säädä sitä kahdella säätimellä: sekoitustilalla, joka päättää, miten harmaa rae sekoittuu alla olevaan väriin, ja peittävyydellä, joka päättää sen voimakkuuden. `soft-light` pitää värit puhtaina ja on lempein, `overlay` lisää kontrastia. `pointer-events: none` estää kerrosta estämästä napsautuksia. ```css .grain { position: relative; isolation: isolate; background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6); } .grain::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--noise); mix-blend-mode: soft-light; opacity: 0.45; pointer-events: none; } ``` Rae liukuvärin ja sisällön välissä: `.grain`in sisällä oleva teksti pysyy terävänä. - Hämäränvioletti: rae pehmentää: `linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6)` - Liuskehehku: rae estää juovat: `radial-gradient(ellipse at 30% 20%, #334155, #0f172a 70%)` - Persikkakoi: rae kuin paperi: `linear-gradient(180deg, #fef3c7, #fdba74 60%, #fb7185)` Kolme liukuväriä, jotka hyötyvät rakeisuudesta eniten. Tummat, vähäkontrastiset häivytykset, kuten keskimmäinen, ovat paikkoja, joissa juovittuminen näkyy ensin. Jos haluat yhden elementin ilman pseudoelementtiä, listaa kohina ensin `background-image`ssa ja aseta `background-blend-mode: soft-light, normal`. Menetät erillisen peittävyyssäätimen, joten paista voimakkuus SVG:hen, esimerkiksi `opacity='0.5'` `rect`-elementille. ## Kuinka paljon rakeisuutta riittää 1. **Aloita himmeästä** Aloita arvolla `opacity: 0.3` ja `soft-light`. Sen pitäisi tuskin erottua käsivarren mitan päästä. 2. **Tarkista tummin alue** Juovittuminen asuu tummissa, hitaissa häivytyksissä. Nosta peittävyyttä, kunnes portaat siellä sulavat, ja lopeta sitten. 3. **Sovita rae kokoon** Koko ruudun hero-alueet sietävät hieman karkeampaa rakeisuutta, noin 0,6. Kortit ja painikkeet haluavat hienoa rakeisuutta, noin 0,9. 4. **Tarkista puhelimella ja suurella näytöllä** Rae, joka näyttää oikealta yhdellä näytöllä, voi näyttää pölyltä toisella. Tavoittele tekstuuria, jonka tunnet mieluummin kuin näet. 5. **Tarkista päällä oleva teksti** Rae ei saa heikentää luettavuutta. Jos pieni teksti on tekstuurin päällä, pienennä voimakkuutta tai pidä teksti rauhallisemmalla alueella. ### Liikaa - Rae näkyy huoneen toiselle puolelle - Värit muuttuvat harmaiksi ja likaisiksi - Karkeaa, pilvistä kohinaa pienillä komponenteilla - Tekstin reunat näyttävät sumeilta pilkutuksen edessä ### Sopivasti - Rae huomataan vain läheltä - Värit pysyvät puhtaina soft-lightilla - Hieno rae mitoitettu elementin mukaan - Juovittuminen poissa, teksti terävää ## CSS-kohinan suorituskyky Toistuva data-URI on kevyt: selain renderöi pienen ruudun kerran ja toistaa sen, ja staattinen kerros piirretään kerran. Kallis versio on suodattimen käyttäminen elävänä suurella elementillä `filter: url(#noise)`, joka ajaa suodattimen jokaiselle pikselille aina kun alue piirtyy uudelleen. Jos animoit rakeen vilkkuvaa filmiä varten, siirrä toistuvaa kerrosta `transform`illa muutamassa nykivässä vaiheessa kohinan uudelleen luomisen sijaan ja kytke se pois [vähennetylle liikkeelle](https://gradiently.design/fi/guide/reduced-motion). ```css .grain { overflow: hidden; } .grain::after { inset: -50%; animation: flicker 0.6s steps(3) infinite; } @keyframes flicker { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } } @media (prefers-reduced-motion: reduce) { .grain::after { animation: none; } } ``` Animoitu rae liikuttamalla ylisuurta ruutua. Negatiivinen inset pitää reunat peitettyinä sen siirtyessä. Valmiiksi renderöity PNG- tai WebP-kohinaruutu, jonka koko on noin 128 ja 256 pikselin välillä, on yhtä hyvä lähde, jos sellainen on jo olemassa. Rakeisuus on myös yksi ainesosa laajemmassa pintojen perheessä paperista lasiin, joita käsitellään oppaassa [taustatekstuuri](https://gradiently.design/fi/guide/background-texture). Se on viimeistelykerros myös [CSS mesh -liukuvärissä](https://gradiently.design/fi/guide/css-mesh-gradient). Rakeisuus on rakennettu jokaiseen Gradientlyn Markiin materiaaliasetuksena valon ja liikkeen rinnalle, joten sillä tehdyt suunnitelmat kantavat tekstuuria ilman koodia. Mark, jossa rakeisuus kuuluu materiaaliin ja piirtyy elävästi eikä kerrostu jälkikäteen. ## FAQ ### Miten lisään kohinatekstuurin CSS:llä? Upota SVG, jossa on `feTurbulence`-suodatin, data-URI:na, toista se pseudoelementillä liukuvärin päällä ja aseta sekoitustila, kuten `soft-light`, matalalla peittävyydellä. ### Miksi SVG-kohinan data-URI ei näy? Yleensä koodaamaton merkki. Koodaa data-URI:ssa `#` muotoon `%23`, `%` muotoon `%25` ja kulmasulkeet muotoon `%3C` ja `%3E`, ja käytä SVG:n sisällä yksinkertaisia lainausmerkkejä. ### Korjaako rakeisuus liukuvärin juovittumisen? Kyllä, useimmissa tapauksissa. Satunnainen hieno vaihtelu rikkoo vierekkäisten sävyjen väliset kovat reunat, joten silmä ei enää näe portaita. ### Mitä baseFrequency-arvoa rakeisuuteen kannattaa käyttää? Noin 0,6 ja 0,9 välillä saat hienon, filmimäisen rakeen. Pienemmät arvot, kuten 0,2, antavat suurta, pilvistä kohinaa. ### Onko CSS-kohina huono suorituskyvylle? Pieni toistuva kohinakuva on kevyt. Eniten maksavat elävät SVG-suodattimet suurilla elementeillä ja jatkuvasti uudelleen luotu kohina.