| De CSS-eigenschap `box-shadow` voegt schaduweffecten rond een element toe. Dit kan worden gebruikt om diepte en dimensie aan een element toe te voegen, of om het te laten opvallen tussen de rest van de inhoud op een pagina.
De eigenschap `box-shadow` kan maximaal vier waarden aannemen, die de verschuiving, vervaging en spreiding van de schaduw en de kleur van de schaduw specificeren.
1. Verschuiving :De offsetwaarden specificeren de horizontale en verticale afstand van de schaduw tot het element. Positieve waarden verplaatsen de schaduw naar rechts en naar beneden, terwijl negatieve waarden de schaduw naar links en naar boven verplaatsen.
2. Vervagen :De vervagingswaarde specificeert de hoeveelheid vervaging die op de schaduw wordt toegepast. Een hogere vervagingswaarde zorgt voor een zachtere schaduw, terwijl een lagere vervagingswaarde een scherpere schaduw creëert.
3. Verspreiding :De spreidingswaarde specificeert de hoeveelheid spreiding die op de schaduw wordt toegepast. Een hogere spreadwaarde zal een bredere schaduw creëren, terwijl een lagere spreadwaarde een smallere schaduw zal creëren.
4. Kleur :De kleurwaarde specificeert de kleur van de schaduw. U kunt elke geldige CSS-kleurwaarde gebruiken, zoals een benoemde kleur, een hexadecimale waarde of een RGB-waarde.
Hier zijn enkele voorbeelden van hoe u de eigenschap `box-shadow` kunt gebruiken om verschillende soorten schaduwen te maken:
- Basisschaduw :
```css
vakschaduw:5px 5px 5px #888888;
```
Hierdoor ontstaat een schaduw met een offset van 5 pixels in zowel de horizontale als de verticale richting, met een vervaging van 5 pixels en verspreid over 5 pixels. De schaduw zal een grijstint zijn.
- Inzetschaduw :
```css
vakschaduw:inzet 5px 5px 5px #888888;
```
Hierdoor ontstaat een inzetschaduw, wat betekent dat de schaduw binnen het element wordt getekend in plaats van erbuiten. De schaduw zal dezelfde grootte en vorm hebben als het element, en zal een grijstint hebben.
- Meerdere schaduwen :
```css
vakschaduw:5px 5px 5px #888888, 10px 10px 10px #444444;
```
Hierdoor ontstaan twee schaduwen, de ene met een grotere offset en onscherpte dan de andere. De schaduwen zullen beide grijstinten zijn, maar de tweede schaduw zal donkerder zijn dan de eerste.
U kunt de eigenschap `box-shadow` gebruiken om een grote verscheidenheid aan schaduwen te creëren, die kunnen worden gebruikt om diepte en dimensie aan uw ontwerpen toe te voegen. Experimenteer met verschillende waarden om te zien welke effecten u kunt creëren. |
