box-shadow (Schatten) – CSS3 Adventskalender Tag 5

Einen Schatten hinter Elemente zu generieren unterstützen heutzutage alle moderneren Browser, selbst für den Internet Explorer 6-8 kann man einen Schatten zaubern. Wie schon im CSS3 Adventskalender Tag 3 – linear-gradient (Hintergrundverlauf) beschrieben, kommt auch hier wieder eine proprietäre CSS-Eigenschaft filter des IE zum Einsatz.

Die CSS3-Eigenschaft orientiert sich am Syntax des text-shadow. Angegeben wird der Versatz auf x- und y-Achse, der Blur-Faktor sowie die Farbe. Auch hier kann man mit Transparenzen, also einem Alphawert arbeiten. Der Versatz kann auch negative Werte annehmen, der Schatten wird dann in die andere Richtung generiert.

.box_shadow {
  -moz-box-shadow: 5px 5px 5px #e2e2e2; /* FF3.5+ */
  -webkit-box-shadow: 5px 5px 5px #e2e2e2;/*Saf3+, Chr*/
  box-shadow: 5px 5px 5px #e2e2e2; /*Op10.5, IE 9, FF4*/
  filter:progid:DXImageTransform.Microsoft.Shadow  ⏎
  (color=#e2e2e2, Direction=135, Strength=5); /* IE6-7 */
  -ms-filter:"progid:DXImageTransform.Microsoft.Shadow  ⏎
  (color=#e2e2e2, Direction=135, Strength=5)"; /* IE8 */
  zoom:1; /* trigger hasLayout */
}

Zudem ist es möglich kommagetrennt mehrere Schatten anzugeben:

-moz-box-shadow : 0 1px 3px rgba(0, 0, 0, .8),   ⏎
0 3px 9px rgba(0, 0, 0, .2);
-webkit-box-shadow : 0 1px 3px rgba(0, 0, 0, .8),   ⏎
0 3px 9px rgba(0, 0, 0, .2);
box-shadow : 0 1px 3px rgba(0, 0, 0, .8),   ⏎
0 3px 9px rgba(0, 0, 0, .2);

praktisches Beispiel:

Suchformular Screenshot:

IE-Ansicht (6-8):

CSS:

.searchForm {
/* Beispiel-Code von Tag 1 */
...

background: -webkit-gradient(linear, left top, left bottom,   ⏎
from(#E0EDF3), to(#ffffff));
background: -moz-linear-gradient(top, #E0EDF3, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient  ⏎
(startColorstr=#E0EDF3, endColorstr=#ffffff)
progid:DXImageTransform.Microsoft.Shadow  ⏎
(color=#30393D, Direction=135, Strength=5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient  ⏎
(startColorstr=#E0EDF3, endColorstr=#ffffff)
progid:DXImageTransform.Microsoft.Shadow
(color=#30393D, Direction=135, Strength=5)";

-moz-box-shadow: 3px 3px 5px #30393D;
-webkit-box-shadow: 3px 3px 5px #30393D;
box-shadow: 3px 3px 5px #30393D;
}
.searchField {
/* Beispiel-Code von Tag 1 */
...

-moz-box-shadow: inset 2px 2px 3px #30393D; 
-webkit-box-shadow: inset 2px 2px 3px #30393D;
box-shadow: inset 2px 2px 3px #30393D;
}

In dem praktischen Beispiel ist der Schatten im input-Feld „searchfield“ nicht hinter dem Feld, also unten rechts, sondern innerhalb, oben links. Diese Ausrichtung wird durch das Wort inset festgelegt. Mehrer Filter-Eigenschaften für die IE6-8 werden einfach hintereinander geschrieben.

Demo

Demo-Datei zu CSS3 box-shadow (Schatten) aufrufen

Browser-Support:

Supported in Safari 3+, Chrome 3+, Firefox 3.5+, Opera 10.5+, IE 6-8 (filter), IE9 Beta.
Opera, IE9 und Firefox ab der Version 4 brauchen keinen Prefix mehr.

Am Tag 6 geht es im Webstandard-Blog mit „Text-Overflow, das Auslassungszeichen …“ weiter.