CSS3 | Box shadow voorbeeld

Met box shadow kun je schaduw meegeven aan html elementen als een div of een span. Op deze manier heb je niet meer meerdere plaatjes nodig om een mooie schaduw te creëren in je website. Daarbij is het mooie dat het dynamischer is dan een plaatje.

CSS3 box shadow in verschillende browsers

Zoals je hieronder ziet, heb ik de box-shadow meerdere malen aangeroepen. Dit is omdat nog de browsers het wel ondersteunen, maar hier hun eigen manier voor hebben. Zo hebben Safari, Chrome and Firefox de -webkit- of -moz- prefix nodig. Daarintegen heeft Opera dit niet nodig.

box-shadow:2px 2px 2px #333333;
-webkit-box-shadow:2px 2px 2px #333333;
-moz-box-shadow:2px 2px 2px #333333;
width:100%;
border:solid 1px #cccccc;”>

Meer info
Als je meer wilt weten over het gebruik van de box shadow property dan verwijs ik je graag naar het volgende artikel: Box-shadow | Schaduw met CSS3

Andere CSS3 elementen:

Vorige Portfolio item

Meer nieuws items

Vorige Portfolio item

Nieuws