Wie der Name schon vermuten lässt, versieht die Eigenschaft “text-shadow” Text mit einem Schlagschatten, “box-shadow” dagegen, stellt Blockelemente mit einem Schlagschatten dar. Mit diesen neuen CSS3-Eigenschaften lassen sich viele lustige Dinge darstellen. Aber seht selbst…

Die Eigenschaft “box-shadow”

Syntax

.box {
box-shadow: 10px 10px 5px #999;
}

Shorthand

Kürzer geht’s nicht.

Browserunterstützung

.box {
-moz-box-shadow: 10px 10px 5px #999;
-webkit-box-shadow: 10px 10px 5px #999;
box-shadow: 10px 10px 5px #999;
}

• Apple Safari 5+
• Google Chrome 10+
• Internet Explorer 9+
• Mozilla Firefox 3.6+
• Opera 11.1+

Beschreibung

Analysieren wir mal das Beispiel:

.box1 {
-moz-box-shadow: 10px 10px 5px #999;
-webkit-box-shadow: 10px 10px 5px #999;
box-shadow: 10px 10px 5px #999;
}

1. Wert = Verschiebung X-Achse in Pixel
2. Wert = Verschiebung Y-Achse in Pixel
3. Wert = Blur Radius in Pixel (mit Wert 0 ist der Schatten scharf, je höher der Wert, desto unschärfer)
4. Wert = Farbe des Schattens

Ein Schlagschatten nach innen lässt sich ebenfalls darstellen. Ergänzt einfach den obigen Befehl um ein inset:

.box2 {
-moz-box-shadow: inset 2px 2px 5px #999;
-webkit-box-shadow: inset 2px 2px 5px #999;
box-shadow: inset 2px 2px 5px #999;
}

Zu diesen fünf Parametern gesellt sich ein optionaler sechster, der zusätzlich die Länge des Schattens bestimmt.

.box3 {
-moz-box-shadow: 10px 10px 5px -5px #999;
-webkit-box-shadow: 10px 10px 5px -5px #999;
box-shadow: 10px 10px 5px -5px #999;
}

Auch möglich: mehrere Schatten für eine Box. Trennt die Schatten einfach durch ein Komma:

.box4 {
  -moz-box-shadow: 5px 5px 5px #999, -5px -5px 5px #555;
  -webkit-box-shadow: 5px 5px 5px #999, -5px -5px 5px #555;
  box-shadow: 5px 5px 5px #999, -5px -5px 5px #555;
}

Soll nur eine Seite “beschattet” werden, erreicht ihr das mit einem identischen Wert für Blur-Radius und Schattenlänge (gleicher Wert im Minus).

Nur untere Seite:

.box5 {
-moz-box-shadow: 0 10px 6px -6px #333;
-webkit-box-shadow: 0 10px 6px -6px #333;
box-shadow: 0 10px 6px -6px #333;
}

Nur rechte Seite:

.box6 {
-moz-box-shadow: 10px 0 6px -6px #333;
-webkit-box-shadow: 10px 0 6px -6px #333;
box-shadow: 10px 0 6px -6px #333;
}

Die Eigenschaft “text-shadow”

Syntax

.text {
text-shadow: 2px 2px 5px #999;
}

Shorthand

Kürzer geht’s nicht.

Browserunterstützung

• Apple Safari 5+
• Google Chrome 10+
• Mozilla Firefox 3.6+
• Opera 11.1+

Beschreibung

Der Text-Schatten ist eines der wenigen CSS3-Eigenschaften, die keine browser-spezifischen Präfixe benötigen. Der Aufruf erfolgt mit

.text {
text-shadow: 5px 5px 5px #999;
}

Die Parameter für text-shadow sind identisch zum box-shadow. Allerdings gibt es hier weder die optionale Längenangabe des Schattens noch den Parameter inset. Dennoch kann man einen pseudo-invertierten Schatten erzeugen. Dazu mehr auf der Demo-Seite.

Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite: