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:
Bisher keine Kommentare vorhanden. Sei der Erste, der einen Kommentar schreibt.