Blog overview

CSS3 Text Shadow – Ein Paar Beispiele

CSS3 ist ja bekanntermaßen in aller Munde und das ist auch gut so. Lassen sich damit doch schöne Sachen machen. Hier möchte ich mal ein paar Beispiele zeigen, was man alles mit Text Shadow machen kann. Das ist reines CSS und keinerlei Grafiken werden dafür benötigt. Es gibt also Möglichkeiten mehr mit Text zu machen als einfach eine Farbe zu vergeben. Der Fantasie sind keine Grenzen gesetzt. Hier lassen sich Möglichkeiten umsetzen die in manch Grafikprogramm gar nicht so einfach zu machen wären :) Aber man sollte hier eher dem Motto folgen "weniger ist mehr" und nicht alles und jedem mit Text Shadow bombardieren. Der Reiz wäre dann sofort verloren. Am tauglichsten halte ich es bei Headlines oder besonderen Textauszeichnungen etc. Letztendlich muss man es aber selber wissen wo und wie oft man es einsetzt.

Wie immer ist es aktuell glaube ich so, dass der Internet Explorer es bis jetzt noch nicht unterstützt. In Version 9 könnte es vielleicht klappen? Also sollte man seine Sachen so anlegen, dass auch Browser die das ganze nicht unterstützen die Texte dennoch lesbar darstellen. Chrome, Firefox und Safari sollten jedoch keine Probleme mit der Darstellung haben.

HTML Code

Die Werte sind folgendermaßen: 1px 2px 3px #000

1px nach rechts
2px nach unten
3px weichzeichnung
Farbe: schwarz.

Der erste Wert gibt also die horizontale Position des Schattens an, der zweite Werte die vertikale Position, der dritte Wert die stärke der Weichzeichnung und der letzte Wert ist die Farbe des Schattens.