Text mit Schatten hinterlegen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

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

HTML-Text mit Schlagschatten

Abbildung: 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 x-Achse, die zweite steht für die y-Achse. Der vierte Wert für text-shadow bestimmt den Weichzeichnungsradius des Schattens. Je größer der Wert ist, desto verschwommener erscheint der Schatten.

Die Eigenschaft text-shadow ist seit der CSS Version 2.1 nicht mehr Teil der Spezifikation. Der einzige bekannte Browser, der diese Eigenschaft unterstützt, ist Safari.

Siehe auch

Mehr zur Eigenschaft text-shadow finden Sie in der Spezifikation für CSS 2.0.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln