CSS schaduweffecten

Koffie
Schaduwen

Maak schaduw effecten met CSS!

Hover boven mij!

CSS schaduweffecten

Met behulp van CSS kun je schaduwen toevoegen aan tekst en elementen.

In onze les ga je de volgende eigenschappen leren:

  • text-shadow
  • box-shadow

CSS tekstschaduw

CSS text-shadow De eigenschap voegt een schaduw toe aan de tekst.

De eenvoudigste gebruikswijze is om alleen de horizontale schaduw (2px) en de verticale schaduw (2px) op te geven:

Text Shadow Effect!

Example

h1 {
  text-shadow: 2px 2px;
{}

Try It Yourself

Daarna voeg je de kleur toe aan de schaduw:

Text Shadow Effect!

Example

h1 {
  text-shadow: 2px 2px rood;
{}

Try It Yourself

Voeg vervolgens een vaagheidseffect toe aan de schaduw:

Text Shadow Effect!

Example

h1 {
  text-shadow: 2px 2px 5px rood;
{}

Try It Yourself

Hier is een voorbeeld dat witte tekst met een zwarte schaduw toont:

Text Shadow Effect!

Example

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
{}

Try It Yourself

Hier is een voorbeeld dat de neonachtige schaduw van rood toont:

Text Shadow Effect!

Example

h1 {
  text-shadow: 0 0 3px #FF0000;
{}

Try It Yourself

Meerdere schaduwen

Om meerdere schaduwen toe te voegen aan de tekst, voeg een lijst van schaduwen gescheiden door komma's toe.

Hier is een voorbeeld dat de neonachtige schaduwen van rood en blauw toont:

Text Shadow Effect!

Example

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
{}

Try It Yourself

The following example shows white text with black, blue, and dark blue shadows:

Text Shadow Effect!

Example

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
{}

Try It Yourself

You can also use the text-shadow property to create a solid border (without shadow) around the text:

Border around the text!

Example

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
{}

Try It Yourself