Gradientvinkel og retning: hvilken vei bør en gradient gå

Gradientvinkelen er retningen fargene i en gradient endrer seg i, og den gjør mer arbeid enn de fleste tror. Den avgjør hvor lyset ser ut til å komme fra, hvor øyet starter og slutter, og om designet føles rolig, oppløftende eller urolig. Som tommelfingerregel føles lysere øverst naturlig, diagonaler føles energiske, og den lyse enden bør ligge unna ordene dine. I CSS starter vinklene på 0deg, som peker oppover, og dreier med klokken.

Hvordan gradientens retning endrer følelsen

Lys ovenfra

Folk antar gjerne at lys kommer ovenfra, fordi det nesten alltid gjør det, fra solen eller et tak. En gradient som er lysere øverst, stemmer med den forventningen, så den leses som naturlig og rolig: himmel over land, en opplyst vegg, en mykt belyst gjenstand. Snu den så lyset ligger nederst, og de samme fargene føles teatralske, som et leirbål, en scene eller en skjerm som lyser i mørket. Ingen av delene er feil, men det andre bør være et valg.

Den samme forventningen påvirker knapper og kort. En flate som er litt lysere øverst, leses som hevet; en som er lysere nederst, leses som trykket inn. Det er verdt å vite når du legger en diskret gradient på en gradientknapp.

Diagonaler og energi

Diagonale linjer føles som bevegelse, fordi de ser ustabile ut sammenlignet med vertikale og horisontale. Derfor er diagonaler, særlig fra øverst til venstre til nederst til høyre, det vanligste valget for innlegg i sosiale medier, knapper og lanseringsgrafikk. Starten øverst til venstre stemmer også med hvor lesere av språk fra venstre mot høyre begynner på en side, så den lyse enden møter dem først.

Brattere og slakere diagonaler endrer stemningen. Rundt 100 til 120 grader føles nesten vertikalt med en svak helning, rolig, men ikke statisk. Rundt 150 til 160 grader føles som sent lys som stryker over en flate. Nøyaktig 45 eller 135 er mest dynamisk, og også mest vanlig, noe som er en grunn til å prøve noe litt annerledes hvis du vil skille deg ut; se tofargede gradienter.

Hold lyset unna ordene

Retning er også layout. Den lyse enden av en gradient trekker til seg øyet, så plasser den der du vil ha oppmerksomhet, og hold teksten på den roligere enden der kontrasten er jevnere. En overskrift øverst i et innlegg passer til en gradient som blir mørkere mot toppen, med gløden i det nederste hjørnet, eller omvendt med mørk skrift.

Slik fungerer gradientvinkler i CSS

I CSS beskriver vinkelen på en lineær gradient retningen fargene beveger seg i. 0deg peker rett opp, og vinklene dreier med klokken: 90deg går fra venstre til høyre, 180deg går fra topp til bunn, og 270deg går fra høyre til venstre. Hvis du utelater vinkelen, er standarden 180deg. Du kan også bruke nøkkelord som to right og to bottom left.

/* These pairs are identical */
.a { background: linear-gradient(90deg,  #fde68a, #7c2d12); }
.b { background: linear-gradient(to right, #fde68a, #7c2d12); }

.c { background: linear-gradient(180deg, #fde68a, #7c2d12); }
.d { background: linear-gradient(#fde68a, #7c2d12); } /* default: to bottom */

/* These are only identical in a square box */
.e { background: linear-gradient(45deg, #fde68a, #7c2d12); }
.f { background: linear-gradient(to top right, #fde68a, #7c2d12); }

Forskjellen i det siste paret betyr noe på bannere og historier. En fast vinkel som 45deg går alltid i 45 grader, uansett form. Et hjørnenøkkelord som to top right vipper vinkelen så den passer boksen, slik at midtfargen går nøyaktig mellom de to andre hjørnene. På et bredt banner i 3:1 blir to top right omtrent 18deg, mye nærmere vertikalt enn 45deg, fordi fargebåndene må ligge langs den lange diagonalen. Bruk nøkkelord når du vil at gradienten skal gå fra hjørne til hjørne på enhver form; bruk grader når du vil ha samme helning overalt.

Velg retning, steg for steg

1. 1

   Bestem hvor lyset kommer fra

   Ovenfra for ro og naturlighet, nedenfra for glød og drama, fra et hjørne for en spotlight.

2. 2

   Plasser ordene først

   Sett overskriften der den hører hjemme i layouten, og la så gradienten gå slik at den rolige enden ligger bak den.

3. 3

   Velg helning etter stemning

   Vertikalt for ro, diagonalt for energi, horisontalt for framdrift.

4. 4

   Sjekk hvert format

   En retning som fungerer i et kvadrat, kan legge lyset på feil sted i en historie eller et banner. Juster per størrelse i stedet for å beskjære.

Resten av syntaksen for lineære gradienter finner du i lineære gradienter i CSS. Andre former som ikke har én enkelt retning i det hele tatt, finner du i typer gradienter. Marks i Gradiently tegnes for hver størrelse du designer i, så lyset lander på et fornuftig sted i hvert format i stedet for der en beskjæring tilfeldigvis etterlater det.