Dank CSS3 erhalten Webdesigner endlich die Möglichkeit, ansehliche Schatteneffekte ohne Grafiken zu verwirklichen. Somit können Webseiten optisch geschickt aufgewertet werden, ohne den Quelltext unnötig kompliziert zu gestalten und ohne zusätzlichen Datenballast zu erzeugen. Die dazu notwendige Eigenschaft box-shadow wird mittlerweile abgesehen vom IE8 von allen modernen Browsern unterstützt.
Definition
Definiert ist die Eigenschaft folgendermaßen:
<shadow> = inset? && [<length>{2,4} && <color>?]
Das bedeutet, dass man optional inset für einen inneren Schatten angegeben kann, 2 bis 4 Längenangaben notwendig sind und wiederum optional eine Farbe definiert werden kann. Bei den Längenangaben kann es sich um positive und teils auch um negative Werte handeln, die Farbe kann natürlich neben dem klassischen Hex-Code bzw. den vordefinierten Konstanten auch mit den neuen Farbmöglichkeiten von CSS3 angegeben werden.
Parameter
Schauen wir uns zunächst die einzelnen Parameter und deren Bedeutung im Detail an:
- Länge 1: Horizontaler Versatz des Schattens. Ein positiver Wert zeichnet den Schatten nach rechts, ein negativer Wert nach links.
- Länge 2: Vertikaler Versatz des Schattens. Ein positiver Wert zeichnet den Schatten nach unten, ein negativer Wert nach oben.
- Länge 3 (optional): Laufweite des Weichzeichners. Hier sind nur positive Werte möglich.
- Länge 4 (optional): Aufsatz auf den Schatten. Ein positiver Wert erweitert den Schatten, ein negativer Wert zieht ihn zusammen.
- Farbe (optional): Die Farbe des Schattens.
- Inset (optional): Wird dieser Wert angegeben, dann handelt es sich um einen inneren Schatten.
Solange sich die Eigenschaft noch in Entwicklung befindet, verwenden Webkit- und Mozilla-Browser ein Präfix. Möchte man sie bereits verwenden, muss sie daher mehrfach mit gleichen Parametern definiert werden: box-shadow (Opera), -moz-box-shadow (Mozilla) und -webkit-box-shadow (Webkit).
Beispiele
Sofern Dein Browser box-shadow (ggf. mit Präfix) bereits unterstützt, kannst Du den Effekt jeweils in der Box Live-Demo sehen. Browser, die box-shadow noch nicht unterstützen, zeigen einfach nur die Box ohne Schatten.
1. Ganz einfacher Schatten:
[cc lang=“css“]
box-shadow: 10px 10px;
[/cc]
| Live-Demo |
|---|
|
Box mit Schatten
|
2. Farbiger Schatten:
[cc lang=“css“]
box-shadow: 10px 10px #999;
[/cc]
| Live-Demo |
|---|
|
Box mit Schatten
|
3. Weichzeichner:
[cc lang=“css“]
box-shadow: 10px 10px 5px #999;
[/cc]
| Live-Demo |
|---|
|
Box mit Schatten
|
4. Mit Aufsatz:
[cc lang=“css“]
box-shadow: 10px 10px 5px 5px #999;
[/cc]
| Live-Demo |
|---|
|
Box mit Schatten
|
5. Mit Abzug:
[cc lang=“css“]
box-shadow: 10px 10px 5px -5px #999;
[/cc]
| Live-Demo |
|---|
|
Box mit Schatten
|
6. Negativer Versatz:
[cc lang=“css“]
box-shadow: -10px -10px 5px #999;
[/cc]
| Live-Demo |
|---|
|
Box mit Schatten
|
7. Innerer Schatten:
[cc lang=“css“]
box-shadow: inset 5px 5px 5px #999;
[/cc]
| Live-Demo |
|---|
|
Box mit Schatten
|
8. Mehrere Schatten:
Es können auch mehrere Schatten definiert werden, wenn diese per Komma getrennt werden:
[cc lang=“css“]
box-shadow: 10px 10px 5px #900, -10px -10px 5px #009;
[/cc]
| Live-Demo |
|---|
|
Box mit Schatten
|