Gradientmaterialer forklart: silke, nordlys, korn og resten

Gradientmaterialer får en gradient til å ligne noe mer enn en blanding av to farger. Et materiale er strukturen fargen fyller: retningsbestemt glans i Silke, lysgardiner i Nordlys, myke fargeskyer i Mesh, sand i Silt og årer i marmor. Hver Gradiently-Mark stabler opptil tre av dem og legger til lys, korn og bevegelse. Derfor kan to Marks med samme palett se helt ulike ut.

Hva et materiale er

Tenk på paletten som maling og materialet som overflaten malingen legges på. Hell samme marineblå, blågrønne og oransje farger på silke, frostet glass eller håndlaget papir, så får du tre ulike gjenstander. I en Mark bruker hvert materiale Markens egen palett, så et materialbytte endrer karakteren uten å endre fargene.

De fjorten materialfamiliene

Gradiently grupperer materialene etter hva de ligner. Navnene under er faktiske materialer du møter på Markedet; hver familie har mange flere.

Silke, nordlys og mesh

Disse tre spør folk oftest om. Silke har retningsbestemt glans over fine tråder: elegant, litt formelt og godt egnet til skjønnhet og mote. Nordlys er lysgardiner som stiger fra en lys kant til en mørk himmel, dramatisk på en dypmørk bakgrunn. Mesh er myke fargeskyer som smelter inn i hverandre, den klassiske moderne gradienten, vennlig og allsidig. Silkegradienter, nordlysgradienter og mesh-gradienter har hver sin guide med CSS.

Korn, papir og trykk

Korn-familien får en skjerm til å se trykt ut. Fiber er håndlaget papir med lange fibre og en og annen prikk, Riso er trykk med to farger, Film er filmkorn, og Dither deler fargen i pikseltrinn. De passer til mat, håndverk, bøker og alt som skal føles håndlaget. De skjuler også bånding, stripene som oppstår i glatte gradienter, som kornete gradienter forklarer.

Slik stables lagene

En Mark har et grunnlag og opptil to lag oppå. Hvert øvre lag har egen opasitet og blandingsmodus, som normal, screen, multiply, overlay eller soft, samme idé som lag i et bilderedigeringsprogram. En vanlig oppskrift er et bredt grunnlag som Mesh eller Dis for fargefeltet, et strukturlag som Lin eller Halvtone for tekstur, og et lyslag som Halo eller Lyslekk for fokus.

.card {
  background:
    /* top layer: a light, screened over the rest */
    radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
    /* middle layer: a fine stripe for texture */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
    /* base layer: the colour field */
    linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
  background-blend-mode: screen, overlay, normal;
}

Lys, korn og bevegelse

I hvert lag endrer noen innstillinger hvordan materialet oppfører seg: skalaen, hvor mye det forvrenges, hvor mange fine detaljer det viser, hvor sterkt det belyses, hvor mye korn det har, og hvor mye det beveger seg. Samme Silke kan være et tett, lyst skimmer eller en bred, dempet drapering. Bevegelsen deles av hele Marken, med egen hastighet og drift, så lagene beveger seg sammen fremfor mot hverandre.

Detaljer og ord konkurrerer. Derfor roer Marks ned urolige detaljer nær tekst automatisk. En Mark vet hvor ordene er: den roligste delen flytter seg bak teksten, og fargene nær bokstavene blir mørkere eller lysere. Slik holder selv et teksturrikt materiale overskriften leselig.

Slik velger du materiale

Spør hva merkevaren din består av. Et bakeri er mel, papir og varmt lys, så Fiber eller Lavering. Et studio som selger programvare, er glass og rent lys, så Frostet eller Prisme. Spør så hvor ofte du skal publisere med bakgrunnen: jo oftere, desto roligere bør den være. Slik velger du riktig Mark tar deg gjennom resten av valget, og Markedet lar deg filtrere direkte etter materiale.