Gradientvinkel og retning: vælg den rette vej for farven

En gradientvinkel er den retning, gradientens farver ændrer sig i, og den gør mere, end de fleste forventer. Den bestemmer, hvor lyset ser ud til at komme fra, hvor øjet starter og slutter, og om designet føles roligt, opløftende eller rastløst. Som tommelfingerregel føles lyst øverst naturligt, diagonaler føles energiske, og den lyse ende bør ligge væk fra ordene. I CSS starter vinkler ved 0deg, som peger opad, og drejer med uret.

Sådan ændrer gradientens retning stemningen

Lys ovenfra

Folk antager ofte, at lys kommer ovenfra, fordi det næsten altid gør, fra solen eller loftet. En gradient, der er lysere øverst, følger forventningen og virker naturlig og rolig: himmel over land, en oplyst væg, en blødt belyst genstand. Vender du den, så lyset ligger nederst, føles samme farver teatralske som et bål, en scene eller en skærm, der lyser i mørket. Ingen af delene er forkert, men det sidste bør være et bevidst valg.

Samme forventning påvirker knapper og kort. En flade, der er lidt lysere øverst, virker hævet. En, der er lysere nederst, virker trykket ind. Det er godt at vide, når du føjer en diskret gradient til en gradientknap.

Diagonaler og energi

Diagonale linjer føles som bevægelse, fordi de virker ustabile sammenlignet med lodrette og vandrette. Derfor er diagonaler, især fra øverst til venstre mod nederst til højre, det mest almindelige valg til sociale opslag, knapper og lanceringsgrafik. Starten øverst til venstre matcher også, hvor læsere af venstre-mod-højre-sprog begynder på en side, så den lyse ende møder dem først.

Stejlere og fladere diagonaler ændrer stemningen. Omkring 100 til 120 grader føles næsten lodret med en svag hældning, roligt uden at være statisk. Omkring 150 til 160 grader føles som sent lys, der stryger hen over en overflade. Præcis 45 eller 135 er mest dynamisk og også mest almindeligt, hvilket er en grund til at prøve noget lidt andet, hvis du vil skille dig ud. Se gradienter med to farver.

Hold lyset væk fra ordene

Retning er også layout. Gradientens lyse ende tiltrækker blikket, så placér den, hvor du ønsker opmærksomhed, og hold teksten på den roligere ende med mere stabil kontrast. En overskrift øverst i et opslag passer til en gradient, der bliver mørkere mod toppen, med glød i et nederste hjørne, eller omvendt med mørk skrift.

Sådan fungerer gradientvinkler i CSS

I CSS beskriver en lineær gradients vinkel den retning, farverne bevæger sig i. 0deg peger lige op, og vinkler drejer med uret: 90deg går fra venstre mod højre, 180deg fra top til bund og 270deg fra højre mod venstre. Udelader du vinklen, er standarden 180deg. Du kan også bruge nøgleord 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); }

Forskellen i det sidste par betyder noget på bannere og stories. En fast vinkel som 45deg går altid i 45 grader uanset formen. Et hjørnenøgleord som to top right tilpasser vinklen til boksen, så midtpunktets farve går præcis mellem de to andre hjørner. På et bredt 3:1-banner svarer to top right til cirka 18deg, langt tættere på lodret end 45deg, fordi farvebåndene skal ligge langs den lange diagonal. Brug nøgleord, når gradienten skal gå fra hjørne til hjørne i alle former. Brug grader, når hældningen skal være ens overalt.

Vælg en retning trin for trin

1. 1

   Beslut, hvor lyset kommer fra

   Ovenfra til ro og naturlighed, nedefra til glød og drama, fra et hjørne til spotlys.

2. 2

   Placér ordene først

   Sæt overskriften, hvor den hører til i layoutet, og lad så gradientens rolige ende ligge bag den.

3. 3

   Vælg hældningen efter stemningen

   Lodret til ro, diagonal til energi, vandret til fremdrift.

4. 4

   Tjek alle formater

   En retning, der virker på et kvadrat, kan placere lyset forkert på en story eller et banner. Tilpas efter størrelse frem for at beskære.

Se lineære CSS-gradienter for resten af syntaksen. Se typer af gradienter for former, der slet ikke har én enkelt retning. Marks i Gradiently renderes til hver størrelse, du designer i, så lyset lander fornuftigt i alle formater frem for dér, hvor en beskæring efterlader det.