CSS-Textshadow-Generator

Grundlagen
CSS-Textshadow-Generator

Grundlagen

Browser

Die CSS Eigenschaft "text-shadow" beherrschen mittlerweile allen modernen Browser. Aussen vor bleibt allerdings der Microsoft Internet Explorer - zumindest einschliesslich der Version 9.

Syntax

Die Syntax für den Textschatten besteht aus 4 Angaben:

[horizontale Verschiebung] [vertikale Verschiebung] [Blur] [Farbcode]

Varianten:
Der Farbcode kann auch als erstes genannt werden. Ebenso kann man die Blur Angabe weglassen - es wird dann Blur=0 angenommen.

In der Eigenschaft text-shadow können zudem mehrere Schattendefinitionen angegeben werden. Diese werden mit Komma voneinander getrennt.
Als Beispiel ein hellblauer Hintergrund und blaue Schriftfarbe.

   background:#ccf;
   color:#99c;
   text-shadow: -1px -1px 0px #eef, 1px 1px 0px #ccf, 2px 2px 2px #888;

In der obigen text-shadow-Angabe sind 3 Schatten-Angaben:

• 1 Pixel nach links oben verschoben ein heller Schatten für eine Lichtkante
• 1 Pixel nach rechts unten verschoben ein Schatten in Hintergrundfarbe. Dies sorgt für einen Rahmen
• 2 Pixel nach rechts unten verschoben ein grauer Schatten

zum Farbcode

Noch ein Wort zum Farbcode. Man kann den die Farbe (z.B. "black", "white", ...) oder den RGB-Code hexadezimal (z.B. #000000 oder die Kurzform #fff) verwenden. Für die Definition von Schlagschatten ist die Angabe mit rgba und Dezimalwerten am einfachsten, da man hier eine Transparenz mitgeben kann.
Um einen grauen Schlagschatten auf weissem Hintergrund zu erzeugen, könnte man verwenden:

• #e0e0e0 - für helles grau
• rgba(0,0,0,0.1) - für schwarze Farbe, aber fast komplett durchsichtig

Bei weissem Hintergrund ist es einfach. Bei einem farbigen Hintergrund macht es schon etwas Arbeit, den richtigen RGB Code für eine geeignete Schattenfarbe zu bestimmen. Bei Grafiken im Hintergrund wirkt eine Transparenz eh am besten.

Seitenanfang

CSS-Textshadow-Generator v1.1

Anleitung

Wähle einen vordefinierten Effekt aus. In der Vorschau darunter wird dieser angezeigt.

Die vorgegebenen Einstellungen kannst du bearbeiten und damit experimentieren.
Die Vorschau wird während deiner Eingabe aktualisiert.

Wenns passt, kopiere dir den zuunterst angezeigten Sourcecode.

Generator

Seitenanfang