We hebben inmiddels al diverse nieuwe functies besproken met betrekking tot CSS3. De laatste die we gaan behandelen is 'box shadow'. Hiermee kun, zoals het al doet vermoeden, schaduw toevoegen aan bijvoorbeeld een div-elemenent. Zoals alle CSS3 webtips is ook deze webtip maar beperkt ondersteund door browsers (Firefox 3+, Safari en Chrome)!

Box Shadow uitgelegd

Laten we maar direct eens kijken hoe dit in zijn werk gaat! In onderstaande voorbeeld zal het div-element met de class naam 'shadow', schaduw krijgen met de kleur zwart (#000). Het eerste getal staat voor de horizontale verschuiving van de schaduw, het tweede getal voor de verticale verschuiving, het derde getal voor de 'blur radius' (hoe kleiner het getal, hoe scherper de schaduw) en de laatste kleurcode staat voor de kleur van de schaduw.

.shadow {
  box-shadow: 5px 5px 5px #000;
  -moz-box-shadow: 5px 5px 5px #000;
  -webkit-box-shadow: 5px 5px 5px #000;
}

En zo simpel is het! Uiteraard is dit ook weer te combineren met de andere nieuwe functies binnen CSS3, zoals gradients of ronde hoeken.

Demo

Een demo van deze webtip vind je hier.