Hoek en richting van een kleurverloop: welke kant moet het op

De hoek van een kleurverloop is de richting waarin de kleuren veranderen, en die doet meer werk dan de meeste mensen denken. Hij bepaalt waar het licht vandaan lijkt te komen, waar het oog begint en eindigt, en of het ontwerp rustig, opbeurend of onrustig voelt. Als vuistregel: bovenaan lichter voelt natuurlijk, diagonalen voelen energiek, en het lichte uiteinde hoort weg van je woorden te zitten. In CSS beginnen hoeken bij 0deg omhoog en draaien ze met de klok mee.

Hoe de richting van een kleurverloop het gevoel verandert

Licht van boven

Mensen gaan er vaak van uit dat licht van boven komt, omdat het dat bijna altijd doet, van de zon of een plafond. Een kleurverloop dat bovenaan lichter is, sluit aan bij die verwachting, dus het leest als natuurlijk en rustig: lucht boven land, een verlichte muur, een zacht belicht voorwerp. Draai het om zodat het licht onderaan zit, en dezelfde kleuren voelen theatraal, als een kampvuur, een podium of een scherm dat in het donker gloeit. Geen van beide is fout, maar de tweede hoort een keuze te zijn.

Dezelfde verwachting speelt bij knoppen en kaarten. Een vlak dat bovenaan net iets lichter is, leest als verhoogd; een vlak dat onderaan lichter is, leest als ingedrukt. Goed om te weten als je een subtiel kleurverloop aan een knop met kleurverloop toevoegt.

Diagonalen en energie

Diagonale lijnen voelen als beweging, omdat ze instabiel lijken vergeleken met verticalen en horizontalen. Daarom zijn diagonalen, vooral van linksboven naar rechtsonder, de meest gekozen richting voor social posts, knoppen en lanceringsbeelden. Het begin linksboven valt ook samen met waar lezers van talen die van links naar rechts lopen een pagina beginnen, dus het lichte uiteinde begroet ze als eerste.

Steilere en vlakkere diagonalen veranderen de sfeer. Rond 100 tot 120 graden voelt bijna verticaal met een lichte helling, rustig maar niet statisch. Rond 150 tot 160 graden voelt als laat licht dat over een oppervlak strijkt. Precies 45 of 135 is het dynamischst, en ook het gewoonst, wat een reden is om iets anders te proberen als je wilt opvallen; zie kleurverlopen met twee kleuren.

Houd het licht weg van de woorden

Richting is ook lay-out. Het heldere uiteinde van een kleurverloop trekt het oog, dus zet het waar je aandacht wilt, en houd tekst op het rustigere uiteinde waar het contrast stabieler is. Een kop bovenaan een post past bij een kleurverloop dat naar boven toe donkerder wordt, met de gloed in de onderste hoek, of andersom met donkere letters.

Hoe hoeken van kleurverlopen werken in CSS

In CSS beschrijft de hoek van een lineair kleurverloop de richting waarin de kleuren reizen. 0deg wijst recht omhoog, en hoeken draaien met de klok mee: 90deg loopt van links naar rechts, 180deg van boven naar beneden en 270deg van rechts naar links. Laat je de hoek weg, dan is de standaard 180deg. Je kunt ook sleutelwoorden gebruiken zoals to right en 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); }

Het verschil in het laatste paar doet ertoe bij banners en stories. Een vaste hoek zoals 45deg loopt altijd onder 45 graden, welke vorm ook. Een hoekwoord zoals to top right kantelt de hoek zodat hij in het vak past, en de middelste kleur loopt dan precies tussen de andere twee hoeken. Op een brede banner van 3:1 komt to top right uit op ongeveer 18deg, veel dichter bij verticaal dan 45deg, omdat de kleurbanden langs de lange diagonaal moeten liggen. Gebruik sleutelwoorden als je het kleurverloop op elke vorm van hoek tot hoek wilt laten lopen; gebruik graden als je overal dezelfde helling wilt.

Stap voor stap een richting kiezen

1. 1

   Bepaal waar het licht vandaan komt

   Van boven voor rustig en natuurlijk, van onder voor gloed en drama, uit een hoek voor een spotlight.

2. 2

   Plaats eerst de woorden

   Zet de kop waar hij in de lay-out hoort, en laat het kleurverloop dan zo lopen dat het rustige uiteinde erachter zit.

3. 3

   Kies de helling bij de sfeer

   Verticaal voor rust, diagonaal voor energie, horizontaal voor voortgang.

4. 4

   Controleer elk formaat

   Een richting die op een vierkant werkt, kan het licht op een story of banner op de verkeerde plek zetten. Pas per formaat aan in plaats van bij te snijden.

Voor de rest van de syntaxis van lineaire kleurverlopen, zie CSS linear-gradient. Voor andere vormen die helemaal geen enkele richting hebben, zie soorten kleurverlopen. Marks in Gradiently worden gerenderd voor elk formaat waarin je ontwerpt, zodat hun licht op elk formaat op een logische plek valt in plaats van waar een uitsnede het laat.