Gradientmaterialer forklaret: silke, nordlys, korn og resten

Gradientmaterialer er det, der får en gradient til at ligne noget frem for en blanding mellem to farver. Et materiale er den struktur, farven fylder: en retningsbestemt glans i Silke, gardiner af lys i Nordlys, bløde skyer i Mesh, sand i Silt, årer i marmor. Hver Gradiently-Mark stabler op til tre af dem og tilføjer så lys, korn og bevægelse, og derfor kan to Marks med samme palet ligne hinanden på ingen måde.

Hvad et materiale er

Tænk på paletten som malingen og materialet som den overflade, den lægges på. Hæld den samme marineblå, petrol og orange på silke, matteret glas eller håndlavet papir, og du får tre forskellige ting. I en Mark henter hvert materiale farver fra Markens egen palet, så et skift af materiale ændrer karakteren uden at ændre farverne.

De fjorten materialefamilier

Gradiently samler sine materialer i familier efter, hvad de minder om. Navnene nedenfor er rigtige materialer, du vil møde på Markedet; hver familie rummer mange flere.

Silke, Nordlys og Mesh

Det er de tre, folk spørger mest om. Silke er en retningsbestemt glans hen over fine tråde: elegant, lidt formel og hjemme i skønhed og mode. Nordlys er gardiner af lys, der stiger fra en lys kant op i en mørk himmel, dramatisk på en helt mørk bund. Mesh er bløde farveskyer, der smelter ind i hinanden, den klassiske moderne gradient, venlig og alsidig. Silkegradienter, nordlysgradienter og mesh-gradienter har hver deres guide med CSS.

Korn, papir og tryk

Korn-familien får en skærm til at se trykt ud. Fiber er håndlavet papir med lange fibre og en enkelt prik hist og her, Riso er et tryk i to farver, Film er filmkorn, Dither trapper farven i pixels. De passer til mad, håndværk, bøger og alt, der skal føles håndlavet. De skjuler også banding, de striber, der opstår i bløde gradienter, som kornede gradienter forklarer.

Hvordan lag stables

En Mark har et bundlag og op til to mere ovenpå. Hvert øvre lag har sin egen opacitet og en blandingstilstand (normal, screen, multiply, overlay eller soft), samme idé som lag i et billedbehandlingsprogram. En almindelig opskrift er en bred bund som Mesh eller Dis til farvefeltet, et strukturlag som Hør eller Halvtone til tekstur og et lyslag som Halo eller Lyslæk til 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 bevægelse

I hvert lag ændrer en håndfuld indstillinger, hvordan materialet opfører sig: dets skala, hvor meget det forvrænges, hvor mange fine detaljer det viser, hvor kraftigt det er belyst, hvor meget korn der ligger på det, og hvor meget det bevæger sig. Den samme Silke kan være et tæt, klart skær eller et bredt, dæmpet fald. Bevægelse deles af hele Marken med sin egen hastighed og drift, så lagene bevæger sig sammen frem for imod hinanden.

Detaljer og ord konkurrerer, og derfor dæmper Marks selv travle detaljer tæt på tekst. En Mark ved, hvor ordene er: Dens roligste område flytter sig om bag teksten, og farverne tæt på bogstaverne bliver dybere eller lysere, så selv et materiale med tekstur holder din overskrift læselig.

Sådan vælger du et materiale

Spørg, hvad dit brand er lavet af. Et bageri er mel, papir og varmt lys, altså Fiber eller Lavering. Et studie, der sælger software, er glas og rent lys, altså Matteret eller Prisme. Spørg så, hvor ofte du vil poste med det: jo oftere, jo roligere skal det være. Sådan vælger du den rigtige Mark gennemgår resten af beslutningen, og på Markedet kan du filtrere direkte efter materiale.