Met shadow kan je jouw element een shaduw geven (foto's, textblokken, tekst e.d.).
Hiernaast staan verschillende voorbeelden van wat mogelijk is met box-shadow. Je kan de waardes zelf aanpassen zoals jij zelf wil.
Voorbeeld en uitleg
box-shadow: 0 0 5px 1px #000;
- De horizontale waarde van de schaduw. Positief is naar rechts, negatief is naar links.
- De verticale waarde van de schaduw. Postief is naar beneden, negatief is naar boven.
- Blur radius. Bepaal hoe groot en hoe veel je schaduw is. Hoe hoger het aantal, des te lichter de schaduw. Negatieve waardes
- Spread distance. Waarde die aangeeft hoe groot de schaduw moet zijn.
- De kleur van de schaduw
Elke kleur staat voor het onderdeel dat je kan aanpassen. De eerste 4 onderdelen kan je aanpassen in aantal px. De laatste kleurcode kan je aanpassen in HEX en RGBA.
Let op
Voor compatibiliteit met oudere browsers moet je altijd -moz-box-shadow en -webkit-box-shadow toevoegen. Dit is voor (oudere) browsers zoals Mozilla FireFox, Safari en Chrome.