Bob de webbouwer bouwt en verbetert websites 040 848 80 69 bob@bobdewebbouwer.com

Een gradiënt is een kleurverloop. Dat kun je met photoshop maken, maar het kan ook met CSS. In deze tutorial vertel ik je hoe je een CSS gradiënt maakt die ook in IE 9 en Internet Explorer 10 werkt!

In dit artikel lees je:

De officiele CSS3 gradiënt code

De meeste moderne browsers (met uitzondering van Safari) kunnen prima omgaan met de officiele CSS3 gradiënt code volgens het W3C:

background: linear-gradient(#ffdd00, #ff5d00);

Zoals je ziet creëer je met deze regel code een kleurverloop van geel (kleurcode #ffdd00) naar oranje (kleurcode #ff5d00). Je begint met de eerste kleur, vervolgens een komma en daarna de tweede kleur.

Meer dan 2 kleuren gebruiken

Je kunt echter ook meer dan 2 kleuren gebruiken, zoals in onderstaand voorbeeld waarin de kleur rood (kleurcode #ff0000) is toegevoegd. Het enige wat je hoeft te doen is meer kleurcodes toe te voegen, gescheiden door een komma.

background: linear-gradient(#ffdd00, #ff5d00, #ff0000);

Een cirkel of ovaal vormige gradiënt

Naast een gradiënt van boven naar onder (linear-gradient) kun je ook een cirkel (of ovaal) vormige gradiënt instellen. Daarvoor gebruik je radial-gradient in plaats van linear-gradient.

background: radial-gradient(#ffdd00, #ff5d00, #ff0000);

Een diagonale gradiënt

Of een diagonale gradiënt:

background: linear-gradient(20deg, #123dfa, #ff0000, #F9C, #FF0);

Ik heb hier wat fellere kleuren gebruikt voor de duidelijkheid, en nog een kleurtje toegevoegd gewoon omdat het kan 😉
De eigenschap deg geeft het aantal graden dat de hoek moet zijn aan, in dit geval 20 graden. Standaard is de hoek 90 graden, van boven naar beneden. Door een negatieve waarde op te geven lopen de kleuren van rechtsboven naar linksonder:

background: linear-gradient(-20deg, #123dfa, #ff0000, #F9C, #FF0);

Zoals je ziet wordt ook de volgorde van de kleuren omgekeerd.

Een gradiënt van links naar rechts

Daarnaast kun je ook een CSS gradiënt van links naar rechts instellen:

background: linear-gradient(left, #5d14f2, #ff0000, #c7aff9);

CSS3 gradiënts : de praktijk

Bovenstaande codefragmenten werken in alle moderne browsers (behalve Safari), met uitzondering van het laatste codefragment. De code in onze stylesheet bij dit fragment is een stuk uitgebreider:

background: -ms-linear-gradient(left, #5d14f2, #ff0000, #c7aff9);
background: -moz-linear-gradient(left, #5d14f2, #ff0000, #c7aff9);
background: -webkit-linear-gradient(left, #5d14f2, #ff0000, #c7aff9);
background: -o-linear-gradient(left, #5d14f2, #ff0000, #c7aff9);
background: linear-gradient(left, #5d14f2, #ff0000, #c7aff9);

De eerste regel is voor Internet Explorer 9 en 10, de tweede regel voor Mozilla’s Firefox, de derde regel voor Chrome en Safari en de vierde regel voor Opera. Voor de volledigheid (en om problemen in de toekomst te voorkomen) heb ik ook de officiële CSS gradiënt code volgens het W3C op de laatste regel toegevoegd.

CSS gradiënts in oudere browsers

Ook als je één van de andere codes gebruikt is het voorlopig verstandig ook de regels voor elke browser op te nemen.
Dit voorkomt problemen in oudere versies van deze browsers, en voor Safari is het op het moment van schrijven zelfs nog noodzakelijk.

Omdat de gradiënt eigenschap pas in CSS 3 is geïntroduceerd kennen hele oude browsers deze eigenschap nog niet.
Het is dan ook altijd verstandig ook een effen achtergrondkleur in te stellen voor deze browsers (in het voorbeeld hieronder is dat lichtpaars, kleurcode #c7aff9).

Voor Internet Explorer 7 en IE 8 is er een workaround beschikbaar:

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=’#ffdd00′, EndColorStr=’#ff5d00′);

De totale code die in alle browsers zou moeten werken is dus:

background: #c7aff9;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=’#5d14f2′, EndColorStr=’#c7aff9′);
background: -ms-linear-gradient(left, #5d14f2, #ff0000, #c7aff9);
background: -moz-linear-gradient(left, #5d14f2, #ff0000, #c7aff9);
background: -webkit-linear-gradient(left, #5d14f2, #ff0000, #c7aff9);
background: -o-linear-gradient(left, #5d14f2, #ff0000, #c7aff9);
background: linear-gradient(left, #5d14f2, #ff0000, #c7aff9);

Dit artikel is een leuk begin om de vele mogelijkheden van de CSS 3 gradiënt eigenschap te verkennen. Er is echter nog heel veel meer mogelijk. Kijk bijvoorbeeld maar eens op deze (Engelstalige) site, waar ook dit artikel grotendeels op gebaseerd is.

WordPress verstuurt geen e-mail

Gratis website tips ontvangen?

Wil je op de hoogte gehouden worden van interessante artikelen, kortingsacties van populaire plugins en andere dingen om je website nog beter te maken? Laat dan hieronder je e-mail adres achter!

Gelukt! Controleer je inbox even voor de bevestigingslink.