CSS und text-shadow für Schlagschatten nutzen

Spezieller Effekt für die Textgestaltung

Nicht sehr häufig verwendet wird der Textschatten, zumindest beim Einsatz mit CSS. Dabei wird über den CSS-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. Und das ist schon erstaunlich und zeigt die Entwicklung von CSS, denn anfangs ging es um die Farbe beim Link oder die Formatierung des Textes. Der Schlagschatten ist hingegen ein typischer Fall für ein Grafikprogramm und kann mit nur einem Befehl einfach und schnell auch per CSS umgesetzt werden.

Text mit CSS und text-shadow mit Schatten ausstatten

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

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.

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Einen Haken hatte die Geschichte allerdings: die Funktion wurde lange nicht unterstützt, vor allem der Internet Explorer mochte die Einstellung nicht. Da dieser keine Rolle mehr spielt, kann man problemlos die Funktion ausprobieren.

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.

Man muss auch aufpassen, dass man es nicht übertreibt, weil die Grafik den Inhalt nicht überstrahlen sollte. Der Schlagschatten ist eine typische grafische Lösung, die trendmäßig eingesetzt wird. Mal haben die meisten Webseiten und ihre Elemente einen solchen Schatten, dann schalten ihn die meisten wieder ab, weil er doch nicht so gut ankommt.

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.

Themenseiten

Startseite CSS-Grundlagen

CSS und text-shadow für Schlagschatten nutzen

Spezieller Effekt für die Textgestaltung

Text mit CSS und text-shadow mit Schatten ausstatten

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich