Schatteneffekte für Text

W3C Entwurf

Mit der CSS-Eigenschaft text-shadow lassen sich Texte mit einem Schatten bzw. einem Schein auszeichnen. Die Eigenschaft erwartet vier Werte:

• der horizontale Versatz des Schattens nach rechts
• der vertikale Versatz des Schattens nach unten
• die Weite der Ausdehnung
• die Schattenfarbe

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
 
<p style='background-color:#ddd;padding:20px;text-align:center;font-size:20px;font-weight:bold;'>
  <span style='text-shadow:2px 2px 7px #555;color:black;'>Beispiel 1</span>
  <span style='text-shadow:0px -4px 15px red;color:black;margin-left:30px;'>Beispiel 2</span>
  <span style='text-shadow:12px -12px 0px red;color:blue;margin:auto 30px;'>Beispiel 3</span>
  <span style='text-shadow:0px 0px 2px black;'>Beispiel 4</span>
</p>

<p style='background-color:#111;padding:20px;text-align:center;font-size:20px;font-weight:bold;'>
  <span style='text-shadow:0px 0px 14px yellow;color:#111;'>Beispiel 5</span>
  <span style='text-shadow:0px 0px 3px white;color:white;margin-left:30px;'>Beispiel 6</span>
  <span style='text-shadow:1px -1px 0px red;color:#111;margin:auto 30px;'>Beispiel 7</span>
  <span style='text-shadow:1px -1px 2px white,1px 1px 2px red,-1px 1px 2px white,-1px -1px 2px red,0px 0px 16px yellow;color:#444;'>Beispiel 8</span>
</p>

Dieses Code-Beispiel erzeugt folgende Effekte:

Beispiel 1 Beispiel 2 Beispiel 3 Beispiel 4

Beispiel 5 Beispiel 6 Beispiel 7 Beispiel 8

box-shadow

Mit box-shadow lassen sich Objekte mit einem Schattenwurf auszeichnen:

• horizontaler Versatz nach rechts
• vertikaler Versatz nach unten
• Verlauf
• Ausdehnung
• Farbe
• inset (optional)

W3C Entwurf

box-shadow:5px 5px 10px 10px #abc;