We hebben weer een simpele maar handige webtip voor jullie. Vandaag gaan we kijken hoe we een gradient, een verloop van de ene naar de andere kleur, kunnen maken met CSS3. Door hier gebruik van te maken hoef je niet meer aan de slag met plaatjes, erg handig dus! Voor Internet Explorer maken we echter gebruik van een iets andere functie omdat deze browser nog geen CSS3 ondersteund. Deze webtip is dus compatibel met Safari, Chrome, Firefox 3.6+ en Internet Explorer.

Voor Webkit browsers (Safari, Chrome)

De volgende code is voor het gebruik van Webkit browsers. 'Type' staat voor het type gradient (bijv. linear, radial). 'Left top' staat voor het beginpunt van de eerste kleur (linksboven in ons voorbeeld dus), 'left bottom' voor het eindpunt van de tweede kleur. 'From(#xxxxxx)' staat voor de beginkleur, 'to(#xxxxxx)' staat voor de eindkleur.

background: -webkit-gradient(type, left top, left bottom, from(#fff), to(#000));

Voor Firefox 3.6+

De volgende code is voor het gebruik van Firefox browsers. De eerste waarde geeft het startpunt aan, de tweede de beginkleur, en de derde waarde de eindkleur.

background: -moz-linear-gradient(top,  #ccc,  #000);

Meer vormen van gradients (waaronder radial) voor deze browser zijn hier te vinden.

Voor Internet Explorer

Voor Internet Explorer maken we gebruik van een speciaal filter om het gewenste resultaat te verkrijgen:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');

Cross-Browser Gradient

Alles bij elkaar ziet het er dus als volgt uit:

background: #8f8f8f; /* voor niet-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000'); /* voor IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000)); /* voor webkit browsers */
background: -moz-linear-gradient(top,  #fff,  #000); /* voor firefox 3.6+ */

Demo

De demo voor deze webtip vind je hier.