CSS-støytekstur: legg korn på gradienter med SVG

En CSS-støytekstur er en fin, tilfeldig spraking lagt over en farge eller gradient for å gi den korn. CSS har ingen støyfunksjon, så den vanlige kilden er SVG: feTurbulence-filteret lager støy, du pakker det inn i en liten SVG, bygger den inn som en data-URI og fliser den over gradienten med lav styrke. Resultatet ser ut som filmkorn eller trykt papir, og det retter stille opp banding, den synlige trinndelingen som dukker opp i store, myke gradienter.

Hvorfor korn får farge til å se dyrere ut, står i kornete gradienter. Denne guiden er implementeringen.

SVG-støyfilteret

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

Å bygge inn støy som en data-URI

En egen fil fungerer, men å bygge den inn sparer en forespørsel og holder effekten på ett sted. I en data-URI må tegn som har betydning i URL-er kodes: < blir %3C, > blir %3E, # blir %23 og % blir %25. Bruk enkle anførselstegn inne i SVG-en så de ikke kolliderer med de doble rundt URL-en.

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

Å legge støy over en gradient

Legg støyen på et pseudoelement over gradienten, og styr den med to rattet: en blandingsmodus, som avgjør hvordan det grå kornet blandes med fargen under, og dekning, som avgjør hvor sterkt det er. soft-light holder fargene rene og er den mildeste, mens overlay gir mer kontrast. pointer-events: none hindrer laget i å blokkere klikk.

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

Foretrekker du ett enkelt element uten pseudoelement, list støyen først i background-image og sett background-blend-mode: soft-light, normal. Da mister du det egne dekningsrattet, så bak inn styrken i SVG-en i stedet, for eksempel med opacity='0.5' på rect.

Hvor mye korn er nok

1. 1

   Start svakt

   Begynn på opacity: 0.3 med soft-light. Du bør knapt merke det på en armlengdes avstand.

2. 2

   Sjekk det mørkeste området

   Banding bor i mørke, langsomme utfasinger. Øk dekningen til trinnene der løses opp, og stopp så.

3. 3

   Tilpass kornet til størrelsen

   Fullskjerms heroer tåler litt grovere korn, rundt 0.6. Kort og knapper vil ha fint korn, rundt 0.9.

4. 4

   Sjekk på en mobil og en stor skjerm

   Korn som ser riktig ut på én skjerm, kan ligne støv på en annen. Sikt mot tekstur du kjenner heller enn ser.

5. 5

   Sjekk teksten oppå

   Korn må ikke redusere lesbarheten. Hvis liten tekst ligger på teksturen, senk styrken eller hold teksten på et roligere område.

Ytelsen til CSS-støy

En flislagt data-URI er billig: nettleseren gjengir den lille flisen én gang og gjentar den, og et statisk lag males én gang. Den dyre versjonen er å bruke filteret levende på et stort element med filter: url(#noise), som kjører filteret over hver piksel hver gang området tegnes om. Hvis du animerer korn, for et flimrende filmpreg, flytt det flislagte laget med transform i noen få rykkende steg i stedet for å generere støy på nytt, og skru det av for redusert bevegelse.

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

En forhåndsgjengitt PNG- eller WebP-støyflis på rundt 128 til 256 piksler er en like god kilde hvis du allerede har en. Korn er også én ingrediens i en bredere familie av flater, fra papir til glass, omtalt i bakgrunnstekstur. Det er også sluttlaget på en mesh-gradient i CSS.

Korn er bygget inn i hver Gradiently-Mark som en materialinnstilling, ved siden av lys og bevegelse, så design laget med en har tekstur uten noen kode.

GR·W4AX·4M

Muslin Anvil

Se denne Marken