Gebruikerswaardering: 0 / 5

Ster inactiefSter inactiefSter inactiefSter inactiefSter inactief
 

Het is niet moeilijk om met behulp van CSS kleurverloop (gradient in het Engels) te maken. Het moeilijkste is waarschijnlijk om de juiste kleuren soepel in elkaar te laten overvloeien.

Let wel op: Internet Explorer versie 9 en ouder ondersteunen geen kleurverloop. Het is om die reden goed om vóór de instelling van een kleurverloop (zoals hieronder in de voorbeelden gebeurt een standaard kleur op te nemen (background: white;). Browsers die kleurverloop wél ondersteunen nemen de tweede instelling

Allereerst een simpel voorbeeld. Hieronder is een kleurovergang te zien van geel naar groen. Hiervoor is slechts een klein stukje CSS-code nodig:

<div style="background: linear-gradient(yellow, green);">
 

Wat opvalt, is dat we hiervoor background (of: background-image) instellen en niet background-color. We gebruiken hier de property linear-gradient met twee parameters (kleur1 en kleur2). Ten derde zien we het kleurverloop van boven naar beneden gaan, wat dus blijkbaar de standaard is.

NB. Naast linear-gradient kennen we ook repeating-linear-gradient, radial-gradient en repeating-radial-gradient. Daarover lees je verderop meer.

Wanneer het kleurverloop een andere kant op moet gaan, dan kunnen we vóór de beide kleuren een extra parameter toevoegen met de daarin de richting.

<div style="background: linear-gradient(to right, yellow, green);
 

Op deze manier kunnen we vier richtingen aangeven: to bottom (standaard), to left, to top en to right. Maar het is ook mogelijk om het kleurverloop diagonaal te maken:

<div style="background: linear-gradient(to bottom left, yellow, green);">
 

Op deze manier kunnen we ook vier richtingen aangeven: to bottom left, to bottom right, to top right en to top left.

We hebben nu gezien dat we de kleur van de ene naar de andere kant en van de ene naar de andere hoek kunnen laten lopen. Maar we kunnen de richting veel nauwkeuriger bepalen, door - in plaats van een tekst voor de richting - een getal in graden op te geven.

<div style="background: linear-gradient(60deg, yellow, green);">
 

Het aantal graden geeft aan naar welke kant het kleurverloop wordt opgebouwd. 0° (genoteerd als 0deg) is naar boven (het zelfde als 'to top'), 180deg is de standaardinstelling ('to bottom'). Als we het vergelijken met een klok, dan staat ieder uur voor 30deg.

Om het iets 'moeilijker' te maken: Het is ook mogelijk om negatieve getallen te gebruiken. Als we bijv. opgeven -30deg, dan gaan we vanuit de bovenkant niet 30 graden naar rechts, maar naar links. Daarmee is -30deg dus het zelfde als 330deg.

Meerdere kleuren

Tot nog toe hebben we alleen nog maar gekeken naar de richting van het kleurverloop. Maar we kunnen natuurlijk ook meerdere kleuren opnemen. Gewoon, door extra parameters toe te voegen:

<div style="background: linear-gradient(to right, yellow, green, cyan);">
 

Of, als je wilt, kun je op deze manier de hele kleurencirkel namaken:

<div style="background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);">
 

Transparantie

Waar we tot nog toe gebruik gemaakt hebben van de kleurnamen, hadden we net zo goed gebruik kunnen maken van de hexadecimale codes of de RGB-waardes. Zie voor alle informatie over namen, hexadecimale codes en RGB-coderingen dit artikel.

Het mooie van met name de RGB-codering is, dat we daar (door er een RGBA-code van te maken) ook met transparantie kunnen werken. In het volgende voorbeeld zien we twee keer dezelfde kleur, de ene keer geheel transparant, de andere keer volledig gevuld:

<div style="background: linear-gradient(90deg, RGBA(0, 128, 0, 0), RGBA(0, 128, 0, 1));">
 

Ongelijkmatige verdeling

Zolang we alleen maar simpelweg de kleuren opgeven, worden deze kleuren gelijkmatig verdeeld over het gehele element waarop het van toepassing is. Maar we kunnen ook aangeven, dat de verdeling minder gelijkmatig moet zijn. Dit is het beste te zien wanneer we meer dan 2 kleuren opgeven (direct daaronder is te zien hoe het kleurverloop er standaard uit ziet):

<div style="background: linear-gradient(to right, yellow 0%, green 20%, cyan 80%, blue 100%);">
 
 

Wat we hier zien, is dat we met percentages aangeven waar een bepaalde kleur op zijn 'hoogtepunt' is. Op 0% is de kleur volledig geel en begint direct te verlopen naar groen, dat op 20% wordt bereikt. Vanaf 20% verloopt de kleur naar cyaan, dat vanaf 80% verloopt naar blauw.

Herhalende patronen

Als laatste bijzonderheid bij lineair kleurverloop noemen we het herhalende kleurverloop. Hierbij geven we weer een aantal kleuren op (in onderstaand voorbeeld beperken we dat tot 3). Maar in plaats van linear-gradient gebruiken we hier repeating-linear-gradient. Om ervoor te zorgen, dat er ook daadwerkelijk 'ruimte' is voor een herhaling van het patroon, gebruiken we bij de percentages lage waardes.

<div style="background: repeating-linear-gradient(to right, red 0%, white 15%, blue 30%);">