Sie sind hier: Startseite -> CSS-Grundlagen -> Textformatierung -> Textschatten

CSS-Grundlagen: text-shadow

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.

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 hat dazu aber keine Lust.

ergibt:

text-shadow: 3px 5px blue;

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

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

Ebenfalls interessant:

Schriftart

Informationen über den CSS-Befehl font-family und die Möglichkeit, mittels CSS die Schriftart vorzugeben.

Schriftgröße

Informationen über den CSS-Befehl font-size, mit dem sich die Schriftgröße des Textes oder der Überschriften auf einer Webseite festlegen lassen.

Schriftstil

Informationen über den CSS-Befehl font-style, mit dem in CSS der Schriftstil festgelegt werden kann.

Fettschrift

Informationen über den CSS-Befehl font-weight, mit dem in CSS die Fettschrift eingestellt und formatiert werden kann.

Schriftvariante

Informationen über den CSS-Befehl font-variant, mit dem man Text als Kapitälchen darstellen lassen kann.

Zeichenabstand

Informationen über den CSS-Befehl letter-spacing, durch den man den Zeichenabstand im Text einstellen kann.

Wortabstand

Informationen über den CSS-Befehl word-spacing, wodurch sich der Abstand zwischen den Wörtern mit CSS definieren lässt.

Textdekoration

Informationen über den CSS-Befehl text-decoration, mit dem die Textdekoration mit CSS ermöglicht wird, beispielsweise unterstreichen oder durchstreichen.

Textumwandlung

Informationen über den CSS-Befehl text-transform, durch den ein Text in Großbuchstaben oder Kleinbuchstaben umgewandelt werden kann.

Textfarbe

Informationen über den CSS-Befehl color, durch den die Textfarbe mittels CSS bestimmt werden kann.

[aktuelle Seite]

Textschatten

Informationen über den CSS-Befehl text-shadow, durch den eine Schattierung eines Textes möglich wird.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Textformatierung

Startseite CSS-Grundlagen