Worum geht’s?

Seit CSS3 seit nunmehr einem Jahr zur Ausstattung aller moderner Browser gehört, kann man sich auf die vielen Design-Möglichkeiten stürzen, die früher „nur im Photoshop“ möglich waren. Sie sind meist „graceful dagradable„, so dass ältere Browser auch ohne das neueste CSS für den Benutzer einigermaßen sinnvoll darstellen können.

Was ist ein 3D-Schatten?

Es ist eine Kombination mehrerer text-shadow-Eigenschaften hintereinander, so dass die einerseits eine Illusion der dritten Dimension des Textes als auch einen passenden Schatten erzeugen.

Das Vorgehen

1. Wir schreiben einen Text (muss groß sein und kurz, damit es wirkt) – am ehesten eine Überschrift – und ordnen dem umgebenden Element (egal ob heading, div, span oder a) eine bestimmte Klasse zu.
2. Wir sorgen dafür, dass der Hintergrund genug Kontrast zum Vordegrund und Schatten bietet.
3. Für diese CSS-Klasse definieren wir hinter „text-shadow“ folgende Werte:
   1. VerschiebungX VerschiebungY Schattenradius Farbe – wobei Verschiebungen bei 1 beginnen, Schattenradius immer 0 ist (eine klare Kante) und die Farbe der Textfarbe entspricht oder etwas heller/dunkler sein kann, um einen direkten Lichtstrahl zu imitieren oder leichten Schatten nachzuahmen.
   2. Wir fügen ein Komma ein und geben es erneut ein, wobei wir VerschiebungX und -Y um einen Pixel vergrößern.
   3. Wir tun das so lange, bis man den Text leicht „von der Seite“ sieht. Die Zahl der Wiederholungen werden wir später als „n“ bezeichnen.
   4. Wir setzen ein Komma und definieren jetzt den Schatten, der direkt oder knapp hinter der letzten 3D-Imitation beginnen sollte. Dazu schreiben wir:
   5. VerschiebungX+n+1 VerschiebungY+n+1 Schattenradius Farbe – wobei Schattenradius mit 0 beginnt und die Farbe per rgba angegeben wird und auch Schwarz mit ganz schwacher Deckung sein kann (z.B. „rgba(50,50,50,0.1)“). rgb oder #xxx gehen auch, aber rgba lässt den Schatten echter erscheinen, weil er den Hintergrund zunehmend durchscheinen lässt.
   6. Wir setzen ein Komma, und wiederholen Punkt 5, wobei das „+1“ in den Verschiebungen inkrementiert wird.
   7. Wir beenden das ganz mit Semikolon.

Das war’s?

Nicht ganz. Man kann noch mehr Experimente machen. Will man den Lichteinfall betonen, wird zuerst eine etwas hellere Farbe (1-3) verwendet und es wird dekrementiert (also „-1“ für Verschiebungen). Den Schatten (4-7) berechnen wir dafür anders: Man rechnet mit „n=0“. Dann wächst die Schrift nach unten rechts, wird von links oben beleuchtet und wird den Schatten ebenfalls nach rechts unten.

Entwurmungsmittel

text-shadow: 1px 1px 0px #CCC, 2px 1px 0px #CCC, 1px 1px 0px #666, 2px 1px 0px #666, 3px 2px 0px #666, 4px 2px 0px #666;

Da solche „Bandwürmer“ im CSS kaum per Hand zu erstellen sind (und gar unlesbar werden wie das Effekt eine Hashing-Funktion), habe ich mir einen solchen Generator einfallen lassen. Sie finden ihn in meinem JSfiddle. Es steht unter CC-BY-SA 3.0 Lizenz und darf gerne woanders „verbaut werden“. Der Quellcode erklärt dem Kenner die Zusammenhänge besser, als ich es im Blog tun kann.

Viel Spaß damit!