Schaduwen Toevoegen voor Diepte

We kunnen box-shadows gebruiken om een visueel effect te creëren waarbij een element boven de achtergrond lijkt te zweven. Dit effect kan diepte toevoegen, specifieke elementen accentueren en visuele interesse aan een webpagina geven. Om dit te bereiken, passen we de eigenschap box-shadow toe.

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 toe te voegen aan tekst en andere elementen. Ze functioneren op dezelfde manier als de eigenschap box-shadow. Deze eigenschappen worden echter minder vaak gebruikt dan box-shadow..