Mai 2011

CSS3 text-shadow • Drop-Shadow oder Schlagschatten für Texte

Die CSS-Kurzschrift 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 (auch IE 9) ohne Browser-Präfix gerendert werden.

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

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>