CSS text-shadow • Drop Shadow / Schlagschatten

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.

                Schattenfarbe ─┐
                               │
       Verlaufs-Radius    ─┐   │
       des Schattens       │   │
                           ▼   ▼
div { text-shadow: 3px 3px 4px #777 }
      ▲            ▲   ▲ 
      │            │   │
      │            │   └- 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.

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.

.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: 
  -1ex 1ex 4px #eee, 
  1em -1ex 2px #ddd
}