CSS-kohinatekstuuri: rakeisuutta liukuväreihin SVG:llä

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. Tämä opas on toteutus.

SVG-kohinasuodatin

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
    <feColorMatrix type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" />
</svg>

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.

: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");
}

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.

.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;
}

Jos haluat yhden elementin ilman pseudoelementtiä, listaa kohina ensin background-imagessa 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. 1

   Aloita himmeästä

   Aloita arvolla opacity: 0.3 ja soft-light. Sen pitäisi tuskin erottua käsivarren mitan päästä.

2. 2

   Tarkista tummin alue

   Juovittuminen asuu tummissa, hitaissa häivytyksissä. Nosta peittävyyttä, kunnes portaat siellä sulavat, ja lopeta sitten.

3. 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. 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. 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.

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 transformilla muutamassa nykivässä vaiheessa kohinan uudelleen luomisen sijaan ja kytke se pois vähennetylle liikkeelle.

.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; }
}

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. Se on viimeistelykerros myös CSS mesh -liukuvärissä.

Rakeisuus on rakennettu jokaiseen Gradientlyn Markiin materiaaliasetuksena valon ja liikkeen rinnalle, joten sillä tehdyt suunnitelmat kantavat tekstuuria ilman koodia.

GR·W4AX·4M

Muslin Anvil

Katso tämä Mark