CSS, HTML und Javascript mit {stil}

CSS text-shadow • Drop-Shadow / Schlagschatten

Harter oder weicher Schatten hinter Text oder Text eingedrückt (embossed)

text-shadow setzt einen harten oder weichen Schatten hinter den Text, ähnlich wie CSS3 box-shadow und hebt ihn so plastisch vom Untergrund ab.

Obendrein kann der CSS-Schatten den Text auch eingedrückt (emboss) erscheinen lassen – in gleicher Weise wie der Relief-Effekt für Ebenen in Photoshop.

text-shadow gab es schon einmal in CSS2, war aber in CSS 2.1 nicht mehr vertreten. In CSS3 kehrt text-shadow wieder zurück – und wird von den modernen Browser ohne Browser-Präfix unterstützt.

Die Syntax ist einfach – nicht viel mehr als der Versatz nach unten und nach rechts.

Schlagschatten und Lichtrichtung

Am Rande: Schon mal bemerkt, dass der Schlagschatten fast immer nach unten rechts gesetzt wird? Fotografen und Kameraleute sagen dazu: Gutes Licht kommt von oben links. Dann liegt der Schatten hinter den Motiv – aus der Leserichtung gesehen. Fällt der Schatten hingegen nach links, liegt er unseren Augen wie ein Hindernis im Weg.

Text Shadow

div { text-shadow: 3px 3px 4px #777 }
      ^            ^   ^   ^   ^  
      |            |   |   |   |  
      |            |   |   |   |
      |            |   |   |   +- Schattenfarbe
      |            |   |   |
      |            |   |   +- Verlaufs-Radius des Schattens
      |            |   |
      |            |   +- Vertikaler Versatz
      |            |
      |            +- Horizontaler Versatz
      | 
      +- CSS3-Eigenschaft text-shadow 

Für Internet Explorer, der CSS3 text-shadow nicht unterstützt, gibt es einen herstellerspezifischen Filter dropshadow, der allerdings schlichtweg elend aussieht.

Text Shadow in IE
#ts { filter: dropshadow(color=#666, offx=8, offy=8) }

oder 

#ts { filter: progid:DXImageTransform.Microsoft.
                        Shadow(color=#888,direction=320); }

Da Microsoft für Intrnet Explorer 10 zugesagt hat, die eigenen Filter nicht weiter zu unterstützen, sollte der dropshadow-Filter in einen Conditinal Comment if IE bis einschließlich IE9 gesetzt werden.

Text Shadow Engraved (graviert)

Damit der Text wirkt, als wäre er leicht in die Oberfläche eingraviert, müssen nur die Werte leicht variiert werden:

<div style="text-shadow: 0px -1px 1px black">
	Text Shadow
</div>
Text Shadow

text-shadow animieren

Da text-shadow auf numerischen Werten agiert, kann text-shadow animiert werden.

TEXT SHADOW
.shadow { 
  font-size: 2em;
  animation: textshadow 8s infinite alternate; 
}

@keyframes textshadow {
	0%   { text-shadow: 1px 1px 0px #333 }
	10%   { text-shadow: 3px 3px 2px #333 }
	20%  { text-shadow: 9px 10px 6px #999 }
	40%  { text-shadow: 10px 15px 6px #ccc }
	60%  { text-shadow: 0px 10px 4px #ccc }
	80%  { text-shadow: -10px 8px 3px #ccc }
	100%  { text-shadow: 1px 5px 1px #eee }
}

Mehrere Schatten für einen Text

Bis zu 6 Schatten für einen Text sind möglich: Dazu müssen nur die einzelnen Werte für jeden Schatten durch Kommas getrennt aufgelistet werden.

Text Shadow
text-shadow: 
  -1ex 1ex 4px #eee, 
  1em -1ex 2px #ddd
}
TEXT TEXT