Schaduwen Toevoegen voor Diepte

Met box-shadows kan een visueel effect worden gecreëerd waarbij een element boven de achtergrond lijkt te zweven. Dit effect zorgt voor diepte, benadrukt specifieke elementen en voegt visuele interesse toe aan een webpagina. Dit wordt bereikt door de eigenschap box-shadow toe te passen.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

• offset-x verwijst naar de horizontale positie van de schaduw; een positieve waarde verschuift de schaduw naar rechts van het element, een negatieve waarde naar links;
• offset-y verwijst naar de verticale positie van de schaduw; een positieve waarde verschuift de schaduw naar beneden, een negatieve waarde naar boven;
• blur-radius bepaalt de mate van vervaging van de schaduw en is optioneel; een hogere waarde zorgt voor een meer vervaagde schaduw;
• spread-radius is ook optioneel en vergroot of verkleint de schaduw afhankelijk van de positieve of negatieve waarde;
• color specificeert de kleur van de schaduw in elk geldig kleurformaat en is eveneens optioneel.

Naast de eigenschappen box-shadow, maken text-shadow en drop-shadow het mogelijk om respectievelijk schaduwen voor tekst en andere elementen te creëren. Ze werken op dezelfde manier als de eigenschap box-shadow. Deze eigenschappen worden echter minder vaak gebruikt dan box-shadow..