Webdesign, Tutorials und mehr - Webmasterpro.de

text-shadow: Textschatten

Mit der CSS Eigenschaft text-shadow können Texte einfach mit einem Schatten-Effekt unterlegt werden, wie es sonst nur mit Grafikprogrammen möglich ist.

Schatten mit text-shadow

Werte

text-shadow bekommt vier Werte:

1. Farbe des Schattens
2. Versatz des Schattens in x-Richtung
3. Versatz des Schattens in y-Richtung
4. Unschärfe-Radius des Schattens: wie weit soll der Schatten gestreckt werden. (Weichzeichnungsgrad)

Zum Beispiel also folgenden Code:

1

text-shadow: #666 2px 3px 1px;

Mehrfache Schatten

Mehrfache Schatten lassen sich so auch realisieren. Bis zu sechs Schatten pro Text lassen sich so umsetzen. Man trennt diese einfach durch ein Komma ab.

Kompatibilität

• Safari 3.1 kann nur einen Schatten darstellen. Ignoriert darauf folgende Schatten
• Safari 4 kann mehrere Schatten darstellen
• Opera 9.5 kann sechs Schatten zeichnen und zeichnet den letzten angegebenen Schatten zuoberst.
• Firefox 3.1 kann unendlich viele Schatten anzeigen und zeichnet den ersten Schatten zuoberst.

Beispiele

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<style type="text/css">
p {
    text-shadow: #666666 2px 1px 1px; 
    color: #000;
}
</style>

<p>
    Schatteneffekt mit 1px Schattenradius.
</p>

Mit text-shadow lassen sich auch Leuchteffekte bauen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<style type="text/css">
p {
    font: 20px bold Verdana;
    padding:20px;
    background:#444;  
    text-shadow: 0px 0px 10px #ff0, -1px -1px #000;
        color: #ff0;
}
</style>
<p>Schatteneffekt mit Leuchteffekt.</p>

Relief Effekt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<style type="text/css">
p {
    font: 20px Verdana, Arial;
    padding:20px;
    background:#444;  
    text-shadow: 1px 1px 0px #222, -1px -1px 0px #666;
    color: #555;
}
</style>
<p>Relief Effekt</p>

Textschatten im Internet Explorer

Im Internet Explorer kann Schatten über die propitäre CSS Eigenschaft filter:glow() erstellt werden

Geschichte der Eigenschaft

Eine Besonderheit der Eigenschaft ist, dass sie bereits mit CSS2 eingeführt wurde, mangels fehlender Unterstützung aus CSS2.1 gestrichen wurde und mit CSS3 wieder Einzug findet.

Weiterführend

• Verschiedene Möglichkeiten/Varianten mit text-shadow (sogar animierte Schatten als Feuereffekt :)
• Schatten in IE und emulation in älteren Browsern
• Weitere Demonstrationen der Möglichkeiten von Schatten

Kommentare: text-shadow: Textschatten

Neuen Kommentar schreiben

.

Beantworten

Gab es diese Eigenschaft nicht schon mal?

Hab es mal vor Jahren an einer Seite verwendet... weiß aber leider nicht mehr wie.

Darius M. am 30.06.2009 um 19:07

Re: .

Beantworten

Ja:

Eine Besonderheit der Eigenschaft ist, dass sie bereits mit CSS2 eingeführt wurde, mangels fehlender Unterstüztung aus CSS2.1 gestrichen wurde und mit CSS3 wieder Einzug findet.

Markus Stahmann am 30.06.2009 um 23:12