CSS-støjtekstur: tilføj korn til gradienter med SVG

En CSS-støjtekstur er en fin, tilfældig spraglethed lagt over en farve eller gradient for at give den korn. CSS har ingen støjfunktion, så den almindelige kilde er SVG: filteret feTurbulence genererer støj, du pakker det ind i en lille SVG, indlejrer den som en data-URI og lægger den i fliser over din gradient med lav styrke. Resultatet ligner filmkorn eller trykt papir og retter i det stille banding, de synlige trin, der opstår i store, bløde gradienter.

Hvorfor korn får farve til at se mere eksklusiv ud, dækkes i kornede gradienter. Denne guide er implementeringen.

SVG-støjfilteret

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

Indlejr støj som data-URI

En separat fil virker, men indlejring sparer en forespørgsel og holder effekten ét sted. I en data-URI skal tegn, der betyder noget i URL’er, kodes: < bliver til %3C, > bliver til %3E, # bliver til %23, og % bliver til %25. Brug enkelte anførselstegn inde i SVG’en, så de ikke støder sammen med de dobbelte omkring 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");
}

Læg støj over en gradient

Læg støjen på et pseudoelement over gradienten, og styr den med to knapper: en blandingstilstand, der afgør, hvordan det grå korn blandes med farven under, og opacity, der afgør, hvor stærk den er. soft-light holder farverne rene og er den blideste. overlay tilføjer mere kontrast. pointer-events: none forhindrer laget i at blokere klik.

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

Foretrækker du ét enkelt element uden pseudoelement, så list støjen først i background-image, og sæt background-blend-mode: soft-light, normal. Du mister den separate opacity-knap, så bag styrken ind i SVG’en i stedet, for eksempel med opacity='0.5' på rect.

Hvor meget korn er nok

1. 1

   Start svagt

   Begynd ved opacity: 0.3 med soft-light. Du bør næsten ikke lægge mærke til det i en armslængdes afstand.

2. 2

   Tjek det mørkeste område

   Banding bor i mørke, langsomme fades. Hæv opacity, til trinene dér opløses, og stop så.

3. 3

   Tilpas kornet til størrelsen

   Helskærmsheroer kan tåle lidt grovere korn, omkring 0,6. Kort og knapper vil have fint korn, omkring 0,9.

4. 4

   Tjek på en telefon og en stor skærm

   Korn, der ser rigtigt ud på én skærm, kan ligne støv på en anden. Sigt efter tekstur, du mærker, frem for ser.

5. 5

   Tjek teksten ovenpå

   Korn må ikke forringe læsbarheden. Ligger lille tekst på teksturen, så sænk styrken, eller hold teksten på et roligere område.

Ydeevne for CSS-støj

En flisebelagt data-URI er billig: browseren gengiver den lille flise én gang og gentager den, og et statisk lag tegnes én gang. Den dyre version er at anvende filteret live på et stort element med filter: url(#noise), som kører filteret over hver pixel, hver gang området gentegnes. Animerer du korn, til et flimrende filmudtryk, så flyt det flisebelagte lag med transform i nogle få hakkende trin i stedet for at generere støj igen, og slå det fra ved reduceret bevægelse.

.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 forrenderet PNG- eller WebP-støjflise på omkring 128 til 256 pixel er en lige så god kilde, hvis du allerede har en. Korn er også én ingrediens i en bredere familie af overflader, fra papir til glas, dækket i baggrundstekstur. Det er også det afsluttende lag på en CSS mesh gradient.

Korn er indbygget i hvert Gradiently-Mark som en materialeindstilling ved siden af lys og bevægelse, så designs lavet med ét bærer tekstur uden nogen kode.

GR·W4AX·4M

Muslin Anvil

Se denne Mark