CSS Kochbuch

2.26 Text mit Schatten hinterlegen

Problem

Text in einer Überschrift soll mit einem Schatten hinterlegt werden, wie in Abbildung 2-41 gezeigt.

Abbildung 2-41. HTML-Text mit Schlagschatten

Lösung

Verwenden Sie die Eigenschaft text-shadow, um Farbe und Platzierung des Schattens festzulegen.

h1 {
 font-size: 2.5em;
 font-family: Myriad, Helvetica, Arial, sans-serif;
 width: 66.6%;
text-shadow: grey .15em .15em .15em;
 margin: 0 0 0.1em 0;
}

Diskussion

Der erste Wert für die Eigenschaft text-shadow bestimmt die Schattenfarbe. Es folgen zwei Werte für die Verschiebung des Schattens gegenüber dem HTML-Text. Die erste Längenangabe bestimmt die Verschiebung auf der ...