Websites met stijl
Naslag: shadow
Op dit naslagblad
Box-shadow en text-shadow
Er zijn twee eigenschappen die een schaduw aanbrengen:
- box-shadow bepaalt de eigenschappen van de schaduwrand om een element.
box-shadow
- text-shadow bepaalt de eigenschappen van de schaduwrand om de letters.
text-shadow
Vorm
Beide eigenschappen kennen vier 4 attributen:
box-shadow: x y vervaging kleur;
text-shadow: x y vervaging kleur;
- x: verschuiving naar rechts (verplicht)
positieve waarden geven een schaduw rechts, negatieve waarden een schaduw links
- y: verschuiving omlaag (verplicht)
positieve waarden geven een schaduw onder, negatieve waarden een schaduw boven
- vervaging (blur) (niet verplicht, standaard waarde is 0)
(hoe groter de waarde -in px-, hoe vager)
- kleur (standaard waarde is zwart)
Elke methode om een kleur aan te geven kan worden gebruikt (bv. naam, rgb, hsl)
Officieel niet verplicht, maar de Safari browser toont geen schaduw als de kleur wordt weggelaten.
Daarnaast zijn er de waarden:
box-shadow: none;
text-shadow: none; | geen schaduw |
box-shadow: inherit;
text-shadow: inherit; | erft de waarde van de parent |
Standaard waarde, vererving
| standaard | geen schaduw |
| vererft | box-shadow: nee, text-shadow: ja |
Voorbeelden
Box-shadow
Verschillende vervaging:
box-shadow: 5px 5px 5px grey;
box-shadow: 5px 5px 10px grey;
box-shadow: 5px 5px 20px grey;
Verschillen in x en y, geen vervaging:
box-shadow: 5px 10px 0px grey;
box-shadow: 10px 5px 0px grey;
box-shadow: 10px 10px 0px grey;
Als de vervaging 0 is kan de derde waarde worden weggelaten:
box-shadow: 5px 10px grey;
box-shadow: 10px 5px grey;
box-shadow: 10px 10px grey;
Positieve en negatieve waarden voor x en y:
box-shadow: -5px 5px 5px green;
box-shadow: 5px -5px 5px green;
box-shadow: -5px -5px 5px green;
Text-shadow
Verschillende vervaging:
text-shadow: 2px 2px 1px grey;
text-shadow: 2px 2px 5px grey;
Verschillende kleur, kleine en grote verschuiving:
text-shadow: 1px 1px 3px blue;
text-shadow: 5px 5px 3px green;
Geen vervaging, positieve en negatieve x en y:
(De schaduw is de gekleurde tekst. Voor de duidelijkheid is hier een super grote verschuiving gebruikt.)
text-shadow: -30px -20px red;
text-shadow: 30px -20px purple;
text-shadow: -30px 20px maroon;
text-shadow: 30px 20px navy;
Voor meer mogelijkheden zie de naslag box-shadow van w3-schools
en naslag text-shadow van w3-schools