CSS text-shadow für Schlagschatten

Textschatten: spezieller Effekt für die Textgestaltung

Nicht sehr häufig verwendet wird der Textschatten, zumindest beim Einsatz mit CSS. Dabei wird über den Befehl text-shadow angegeben, wo sich der Schatten befinden soll und wie er auszusehen hat. Damit lassen sich ebenfalls nette Effekte erzielen, aber es funktioniert nicht immer so wie gewünscht.

Die Funktion ist eigentlich vom Grafikprogramm her bekannt, wo man mit Schlagschatten für ein wenig 3D-Effekt sorgt, etwa um ein Bild hervorzuheben oder andere Reaktionen zu erzielen. Diese Idee lässt sich mit CSS ebenfalls bewerkstelligen und zwar für ganze Bereiche und ihre Rahmen, aber auch für den Text selbst.

Text mit CSS und text-shadow mit Schatten ausstatten

Eingesetzt wird der Befehl in folgender Weise:

text-shadow: 3px 3px blue;
text-shadow: 4px 4px 5px, -2px -4px #ff9900;

Im ersten Beispiel wird ein Schatten erzeugt, der eine blaue Farbe hat und sich 3 Pixel nach rechts vom Text verrückt und ebenfalls 3 Pixel nach unten verschoben zeigt.

Das zweite Beispiel beinhaltet gleich zwei Schatten. Der erste ist 4 Pixel nach rechts und unten verschoben, der zweite 2 Pixel nach links und 4 Pixel nach oben.

Einen Haken hat die Geschichte allerdings: die Funktion wurde lange nicht unterstützt und auch jetzt noch mag nicht jeder Browser den Schatten zeigen. Im Firefox gibt es kein Problem, auch der Opera zeigt den Schatten richtig, der Internet Explorer hatte dazu aber keine Lust. Moderne Browser sollten aber damit keine Schwierigkeiten haben, ausprobieren sollte man es aber trotzdem mit Programmen, von denen man weiß, dass viele Leute damit den Besuch durchführen.

ergibt:

text-shadow: 3px 5px blue;

text-shadow: -3px -5px #999999;

text-shadow: 3px 3px blue, -3px -3px #999999;

Die Beispiele zeigen, dass es sehr wohl möglich ist, auch beim Text Schatten zu erzeugen, aber man muss schon den richtigen Wert und die richtige Farbe treffen, damit der Effekt nicht nach hinten losgeht. Denn die Beispiele zeigen, dass der Text dadurch leicht auch unlesbar werden kann.

Lesen Sie auch

Die Textformatierung ist bei CSS neben der Positionierung eine Hauptaufgabe, weil gefälliger Text einfach eher angenommen wird und einen Mehrwert darstellt. Man darf es nicht übertreiben, aber man kann sich damit sich auch einmal spielen und ein wenig die Reaktionen überprüfen. Wichtig ist einmal die grundsätzliche Einstellung der Schriftart und Schriftgröße.

Dann kommen Befehle, die sehr häufig benötigt werden. Dazu gehört font-weight für die Fettschrift, alternativ und nicht so häufig wird man font-style für kursiv nutzen. Sehr oft braucht man color für die Textfarbe und text-decoration speziell bei der Gestaltung und Auszeichnung der Links.

Und dann gibt es noch weitere Einstellungen wie den Abstand von Buchstaben und Wörter, den Schatten oder auch die Textumwandlung und die Schriftvariante.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel