CSS, HTML und Javascript mit {stil}

CSS text-shadow • Drop-Shadow / Schlagschatten für Texte

text shadow Schatten für Text

text-shadow setzt einen Schatten hinter den Text, ähnlich wie CSS3 box-shadow.

text-shadow gehört zu den Stilen aus CSS3, die von den modernen Browsern ohne Browser-Präfix gerendert werden.

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

Die Syntax ist einfach – nicht viel mehr als der Versatz nach unten und nach rechts. Und obendrein kann der CSS-Schlagschatten-Effekt auch eingedrückt (»emboss«) werden – in gleicher Weise wie der Relief-Effekt für Ebenen in Photoshop.

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. Wenn der Schatten nach rechts fällt, 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

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
<div style="text-shadow: 
      3px 3px 4px rgba(0,0,0,0.4), 
      -30px -10px 8px rgba(180,180,220,0.4)">
   Text Shadow
</div>