Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Schatten werfen mit CSS3

Schatten werfen mit CSS3

Schatten sind auch im Web zunehmend ein beliebtes Gestaltungsmittel. Sie können Elemente von ihrem Hintergrund lösen und so für einen plastischen Effekt sorgen. Bei der Umsetzung mit CSS3 sind jedoch einige Dinge zu beachten. Marcel Böttcher zeigt, welche Fallstricke Ihr umgehen solltet.

Gemälde (Ausschnitt): (Michelangelo Merisi da) Caravaggio, Das Abendmahl in Emmaus. 1601. National Gallery, London.

Anders als in Photoshop werden Schatten in CSS3 grundsätzlich in text-shadows und box-shadows aufgeteilt. Ihr legt also vorerst fest, ob sich der Schatten auf die Outline (also die Umrandung) des Elements oder den in ihm befindlichen Text beziehen soll. Der box-shadow passt sich dabei übrigens sogar der Outline an, wenn diese mit einem border-radius abgerundet wurde.

Die Grundarchitektur

Der box-shadow erwartet zwei bis vier Größenangaben, gefolgt von einem Farbton. Optional kann dem ein inset vorangestellt werden.

  1. box-shadow: inset 2px 2px 2px #000;

Die ersten beiden Größenangaben bestimmen die Verschiebung des Schattens auf der X- und Y-Achse. Wie auch bei der background-position bezieht sich der erste Wert auf den horizontalen und der zweite auf den vertikalen Versatz. Mit negativen Werten geht es entsprechend nach oben bzw. rechts.

Da die Positionierung anders als in Photoshop funktioniert, wo der Versatz des Schattens über einen Abstandswert und dem Winkel festgelegt wird, lassen sich Werte nicht eins zu eins umrechnen. Der einfachste Weg ist, wenn Ihr wirklich auf eine direkte Umrechnung angewiesen seid, die Größe in den Ebeneneigenschaften in Photoshop auf 0 Px zu stellen. Die nun harte Schattenkante lässt sich so sehr leicht vermessen.

Die dritte Pixelangabe ist optional und zeichnet den Schatten weich. Im Ebenenstil von Photoshop entspricht dies dem Wert »Größe«. Ebenfalls optional ist die vierte Größenangabe. Sie existiert in der Form in Photoshop nicht, ist aber sehr komfortabel. Mit ihr lässt sich der Radius des Schattens erweitern oder verkleinern.

Über die Angabe inset wird, um beim Vergleich mit Photoshop zu bleiben, aus dem Schlagschatten ein Schatten nach Innen.

Vergleich der vielen unterschiedlichen Einstellungsoptionen von box-shadow

Der Aufbau des text-shadow ist etwas übersichtlicher. Hier entfällt die Möglichkeit des inset sowie die vierte Größenangabe für den Radius. Der restliche Aufbau ist identisch.

  1. text-shadow: #000 1px 1px 2px;
Demonstration von text-shadow anhand des Namens Webkrauts

Ob mit der Farbangabe begonnen wird oder diese ganz am Ende steht, ist in der Praxis irrelevant. Die Reihenfolge der Größenangaben muss allerdings eingehalten werden. Wollt Ihr keine Weichzeichnung aber einen Radius bestimmen, nehmt Ihr für die dritte Größenangabe einfach den Ausgangswert von 0 Pixeln.

Für Chrome und Safari sowie die älteren Firefox-Versionen ist beim box-shadow die Verwendung zweier Vendor-Prefixes notwendig. Somit müssen z. Zt. alle Angaben dreifach gemacht werden. Im Gegensatz zum border-radius bleibt der Aufbau aber gleich.

  1. box-shadow: 1px 1px 2px #000;
  2. -moz-box-shadow: 1px 1px 2px #000;
  3. -webkit-box-shadow: 1px 1px 2px #000;

Auf CSS ist kein Verlass

Wie bei den meisten neuen Webtechnologien müsst Ihr auch hier damit rechnen, dass die CSS3-Schatten nicht oder nur zum Teil vom eingesetzten Browser unterstützt werden. In den meisten Fällen ist dies kein Beinbruch, da lediglich ein visueller Effekt, aber keine Inhalte verloren gehen. Wollt Ihr allerdings einen Layer von seinem Hintergrund visuell abheben (z.B. bei einem eigens gestalteten Dialogfenster), sollte das durch einen zusätzliche Border auch ohne Schattenunterstützung sichergestellt sein.

Grautöne

Wenn Ihr mit einfachen HEX-Farbwerten arbeitet, werden Euch schnell die Grenzen aufzeigt. Denn im Gegensatz zu Photoshop gibt es bei CSS3-Schatten keine separate Transparenzangabe. Zwar können wir mit einem Grauton (z.B. #777) einen Schatten grundsätzlich heller gestalten. Auf einem nicht weißen Hintergrund wird das Ergebnis allerdings alles andere als zufriedenstellend sein.

Der Grund? Setzen wir #777 als Farbwert für einen Schatten, erhalten wir einen Verlauf von #777 mit 0% Transparenz zu #777 mit 100% Transparenz. Im Schatteninneren entsteht so eine graue Fläche. Statt eines realistischen Schattens wirkt das wie ein umgekippter Farbtopf.

Abhilfe schafft die Verwendung von RGBA-Farbwerten. Dank des Alpha-Kanals können wir bei einem satten und somit realistischen Schwarz bleiben. Statt des HEX-Wertes #777 verwenden wir ein halbtransparentes Schwarz: rgba(0,0,0,0.6). Wir erhalten einen Verlauf von #000 mit 50% Transparenz zu #000 mit 100% Transparenz und der graue Schleier ist abgelegt.

Gegenüberstellung der Schatten mit Hex-Wert und mit RGBa-Wert

Verwendung mehrerer Schatten

In CSS3 lassen sich kommasepariert mehrere Schatten in einer Anweisung unterbringen. Zu beachten ist allerdings, dass einige Browserversionen zwar bereits box- und text-shadow unterstützen, jedoch nur eine Anweisung verstehen können. In diesem Fall wird der erste Schatten korrekt dargestellt und alle folgenden ignoriert.

  1. text-shadow: #666 4px 4px 3px, #aaa -4px -4px 3px;

Insbesondere bei Text lässt sich besonders gut mit mehreren Schatten arbeiten, um so einen Tiefeneffekt zu erzielen.

  1. text-shadow: #888 1px 1px 1px, #888 2px 2px 1px, #888 3px 3px 1px, #888 4px 4px 1px;
Demonstration mehrerer Schatten

Eingedrückter Text

Wie bereits erwähnt, kann bei einem text-shadow nicht mit einem zusätzlichen inset gearbeitet werden. Viele Texteffekte lassen sich allerdings bis zu einem gewissen Grad optisch nachstellen. Für den Look einer eingedrückten Schrift sollte beachtet werden, dass sich die Schriftfarbe um einige Töne dunkler als der Hintergrund ist, auf dem sie steht. Mit einer um 1 px versetzten Lichtkante lässt sich der Effekt einer in den Hintergrund ragenden Schrift erzeugen.

  1. background: #B54;
  2. color: #522;
  3. text-shadow: rgba(255, 255, 255, 0.15) 1px 1px 0px;
Demonstration eingedrückten Textes

Je nach Farbgebung ist hier entsprechend Feinabstimmung notwendig.

Fazit

Schatten lassen sich bereits heute sehr gut einsetzen. Das Design sollte jedoch immer auch dann noch funktionieren, wenn diese nicht unterstützt werden. Zudem sollten gestalterische Texteffekte nie zu Lasten der Lesbarkeit gehen.

Gemälde (Ausschnitt): (Michelangelo Merisi da) Caravaggio, Das Abendmahl in Emmaus. 1601. National Gallery, London.

Kommentare

Dieter
am 24.12.2010 - 16:15

Schöner Artikel. Danke!
Das mit den RGBA-Farbwerten und Alphatransparenz für box-shadow wusste und kannte ich noch nicht.

Hilfreich wären noch ergänzende Hinweise darauf, welche Browser was unterstützen.

Ich wünsche schöne Weihnachten und ein besinnliches Fest.

Permanenter Link

Michael
am 24.12.2010 - 16:33

Permanenter Link

Thomas
am 03.01.2011 - 09:16

"Schöner Artikel. Danke!
Das mit den RGBA-Farbwerten und Alphatransparenz für box-shadow wusste und kannte ich noch nicht."

Meine vollste Zustimmung! Habe mir den ganzen Kalender zu Gemüte geführt, großes Lob an alle Autoren!

Permanenter Link

Marcel
am 10.01.2011 - 10:00

Sehr gut und klar beschrieben. Vielen Dank dafür und für alle anderen sehr interessanten Artikel des Adventskalenders.

Bleibt zu hoffen, dass in zwei bis drei Jahren, die überwiegende Mehrheit der Surfer mit CSS3 kompatiblen Browser im Netz unterwegs sind, damit dieser schöne Effekt auch ohne Workarounds für die meisten Surfer sichtbar ist.

Permanenter Link

Michelle Goldmayer
am 14.01.2011 - 10:05

Gutr Artikel. Die Befürchtungen, dass nur wenige Surfer CSS3 kompatible Browser nutzen teile ich nicht. De meisten sind Neuerungen gegenüber aufgeschlossen.

Permanenter Link

Roman
am 19.01.2011 - 14:40

Schöner Beitrag und gut fomuliert. Wie Marcel schon sagte, bleibt eigentlich nur zu hoffen das die breite Masse bald mit kompatiblen Browsern unterwegs ist. Grüße aus Krefeld.

Permanenter Link

Die Kommentare sind geschlossen.