Schlagschatten mit CSS

Ein weiterer Beitrag aus der Rubrik "Sieht schön aus, ist aber kompliziert zu machen". Es geht um einen Schlagschatten um eine Box mit variabler Breite und Höhe. Auch hier würde man (analog zu den abgerundeten Ecken) mit mehreren Grafiken arbeiten, doch CSS3 schafft abhilfe.

Die Syntax

div {

    -moz-box-shadow: 10px 10px 5px #ddd;

    -webkit-box-shadow: 10px 10px 5px #ddd;

    box-shadow: 10px 10px 5px #ddd;

}

Die Schlagschatten-Funktion besteht aus bis zu 5 Argumenten:

1. Schattenart (optional, wurde im Beispiel nicht verwendet)
2. Versatz von links
3. Versatz von oben
4. Unschärfe
5. Farbcode

1. Schattenart

Wenn dieser Wert nicht angegeben wird, wird der Schatten automatisch außen um das Block-Element gerendet. Man hat jedoch die Möglichkeit ein "inset" einzufügen. Dann wird der Schatten innerhalb des Elementes erstellt.

2. Versatz von links

Ein positiver Wert bedeutet, dass der Schatten rechts von dem Element erstellt wird. Bei einem negativen Wert wird der Schatten links des Elements erstellt. Ist der Wert "0px" wird er sowohl links als auch rechts dargestellt.

3. Versatz von oben

analog zu "2. Versatz von links"

4. Unschärfe

Ist der Wert auf "0px", wird der Schatten scharf dargestellt. Je höher der Wert, desto weicher wird der Schatten.

5. Farbcode

Bestimmt die Farbe des Schattens

Browserkompatibilität

Wie bereits an den CSS-Prefix zu sehen, wird das Box-Shadow Argument wiedermal nicht von Haus aus vom Internet Explorer, sondern nur von Firefox und den Webkit Browsern unterstützt. Man kann sich jedoch mit den IE-CSS-Filter Argumenten abhilfe schaffen.

div {

    filter: progid:DXImageTransform.Microsoft.Shadow(

        color='#dddddd',

        direction=135,

        strength=5

    );

}

Dieser IE-Schlagschatten ist zwar nicht wirklich schön, aber für den IE-Benutzer ist er besser als nichts ;)

Chris