CSS text-shadow • Drop Shadow / Schlagschatten

CSS box-shadow: Schlagschatten oder Drop-Shadow

text-shadow setzt einen harten oder weichen Schatten hinter den Text, ähnlich wie CSS 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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

text-shadow und Lichtrichtung

Schon mal bemerkt, dass Schlagschatten fast immer nach unten rechts fällt? Fotografen und Kameraleute sagen dazu: »Gutes Licht kommt von oben links«. Dann liegt der Schatten hinter dem Motiv – aus der Leserichtung gesehen. Fällt der Schatten hingegen nach links, liegt er in unseren Augen wie ein Hindernis vor dem Objekt.

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

Text Shadow

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

Am Rand, besser am Abgrund: Für IE9 und älter, die text-shadow noch nicht unterstützten, gab es einen herstellerspezifischen Filter dropshadow, der allerdings schlichtweg elend aussah.

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

oder 

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

Den dürfen wir heute schlichtweg aus der überfüllten CSS-Datei streichen.

Text Shadow Beispiele

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

Elegant: Variation von Abstand und Helligkeit.

3D Text: Raffinierte Stufen.

Elegant
Text Shadow
3D TEXT

Perfekt mit HSL, weil Farben unterschiedlicher Helligkeit einfach kalkulierbar sind.

.elegant {
  background-color: hsl(0,0%,80%);
  letter-spacing: .15em;
  color: hsl(0,0%,94%);
  text-shadow: 
    -1px 2px 1px hsl(0,0%,52%), 
    -2px 4px 1px hsl(0,0%,54%), 
    -3px 6px 1px hsl(0,0%,56%), 
    -4px 8px 1px hsl(0,0%,58%), 
    -5px 10px 1px hsl(0,0%,60%), 
    -6px 12px 1px hsl(0,0%,62%), 
    -7px 14px 1px hsl(0,0%,64%), 
    -8px 16px 1px hsl(0,0%,66%), 
    -9px 18px 1px hsl(0,0%,66%), 
    -10px 20px 1px hsl(0,0%,68%), 
    -11px 22px 1px hsl(0,0%,70%), 
    -12px 24px 1px hsl(0,0%,72%), 
    -13px 26px 1px hsl(0,0%,74%), 
    -14px 28px 1px hsl(0,0%,76%), 
    -15px 30px 1px hsl(0,0%,78%), 
    -16px 32px 1px hsl(0,0%,80%), 
    -17px 34px 1px hsl(0,0%,78%)
}

.text-3d { 
   color: hsl(15,70%,70%); 
   background: hsl(15,60%,82%);
   text-shadow:
     0 1px 0 hsl(15,40%,60%),
     0 1px 0 hsl(15,40%,58%),
     0 3px 0 hsl(15,40%,56%),
     0 4px 0 hsl(15,40%,54%),
     0 5px 0 hsl(15,40%,52%),
     0 6px 1px hsl(15,40%,50%),
     0 0 5px hsl(15,20%,60%),
     0 1px 3px hsl(15,20%,58%),
     0 3px 5px hsl(15,20%,56%),
     0 5px 10px hsl(15,20%,54%),
     0 10px 10px hsl(15,20%,52%),
     0 15px 15px hsl(15,20%,50%);
}
.engrave {
   background: hsl(190,50%,80%);
   color:hsl(190,50%,80%);
   text-shadow: 
     -1px -1px 1px hsl(190,50%,90%), 
     1px 1px 1px hsl(190,50%,50%);
}

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
}