Mit CSS3 hält ein wirklich nützliches Feature Einzug in modernes Webdesign: CSS-Box-Shadow. Endlich kann man ohne frickelige Background-Images oder Javascript-Unterstützung brauchbare Schatten für Objekte erzeugen.
Obwohl die Schatten eigentlich immer an allen vier Seiten angezeigt werden, lässt sich mit den richtigen Angaben beispielsweise an DIV-Containern auch an einzelnen Seiten ein solcher Schatten ausgeben.
Box-Shadow: eine gaaaaanz kurze Erklärung
Generell wird der Box-Shadow für ein Objekt wie folgt angegeben, wobei der ein oder andere Browser noch sein proprietäres Prefix (-moz- oder -webkit-) benötigt. Welche Versionen das im Einzelnen sind, steht in der Tabelle zur Box-Shadow-Browserkompatibilität weiter unten.
div { box-shadow: -5px -5px 5px 5px #000; }
Der erste Wert ist der Abstand (Offset) nach Links, gefolgt vom Abstand des Schattens nach Oben. Negative Werte sind hier erlaubt. So lässt sich ein Schlagschatten in beliebige Richtung erzeugen. (Dass es sich bei dem HEX-Wert um die Farbe handelt, ist hoffentlich selbsterklärend.) Ein Beispiel ohne die anderen Werte wäre dies:
div {
margin: 0 auto;
width: 100px;
height: 50px;
border: 1px solid #000;
background: #EEE;
box-shadow: -5px -5px #000; }
Das sieht in kompatiblen Browsern so aus:
Die weiteren beiden möglichen Angaben stehen für den Blur-Radius, also die Schärfe des Schattens und den Spread-Radius, respektive die Erweiterung. Sind hier keine Angaben gemacht wird automatisch 0 verwendet. Dies resultiert in einem scharfen Schatten der so groß ist wie das Element selbst. Dies sieht man auch schön an dem obigen Beispiel. Würde man alle 4 Werte angeben sehe die Box z.B. so aus.
div { box-shadow: -5px -5px 5px 5px #000; }
Schön zu sehen, dass der Schatten größer und unschärfer geworden ist. So kann man auch einen Schatten rund um das ganze Objekt erzeugen, indem man den Versatz in beide Richtungen auf 0 setzt.
div { box-shadow: 0 0 5px 5px #000; }
Eine ausführliche und deutlich detailliertere Erläuterung erhält man auch bei CSS3.info.
Schatten nur an einer Seite
Um einen Schatten nur an einer Seite zu erzielen kann man die Eigenschaften so kombinieren, dass der Schatten nur an eben dieser Seite hervorschaut:
div { box-shadow: 0 4px 2px -2px #000; }
Das Prinzip beruht darauf, dass man einen negativen Spread-Radius nimmt und dann den Schatten über den Versatz an der entsprechenden Stelle hinausschiebt. Leider lassen sich so nicht beliebig weite und unscharfe Schatten erstellen, da sonst an den anderen Seiten ebenfalls ein unscharfer Schatten hervorschaut. Aber man kommt schon recht weit.
Speziell wenn man über das Schlagwort “inset” nachdenkt, also die innere Anlage von Schatten, gibt es einige Variationsmöglichkeiten.
div { box-shadow: 0 -5px 5px -5px #000 inset; }
Kennt Ihr noch weitere Tricks rund um den Schatten? Dann bitte direkt in die Kommentare damit!
Browserkompatibilität für CSS3 Box-Shadow
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Box-Shadow Unterstützung |
10.0 1.0 -webkit |
4.0 (2.0)
3.5 (1.9.1) |
9.0 | 10.5 | (WebKit 534) 3.0 (WebKit 522) -webkit |
| Unterstützung für mehrere Schatten |
10.0 1.0 -webkit |
4.0 (2.0)
3.5 (1.9.1) |
9.0 | 10.5 | (WebKit 534) 3.0 (WebKit 522) -webkit |
| inset Unterstützung |
10.0 4.0 -webkit |
4.0 (2.0)
3.5 (1.9.1) |
9.0 | 10.5 | (WebKit 534) 5.0 (WebKit 533) -webkit |
| Spread radius Unterstützung |
10.0 4.0 -webkit |
4.0 (2.0)
3.5 (1.9.1) |
9.0 | 10.5 | (WebKit 534) 5.0 (WebKit 533) -webkit |
Angaben sind dem Mozilla Development Center entnommen.
Die offiziellen Spezifikationen finden sich selbstverständlich beim W3C.
danke, das war mir eine große hilfe!
pepe