Eine der interessantesten Neuerungen, die CSS3 für Webdesigner mit sich bringt, ist die Möglichkeit beliebigen Elementen einen Schlagschatten zu verpassen. Musste man früher mit Grafiken und HTML-Handständen einen hübschen Schatten basteln, so kann man das nun bequem per CSS erledigen:

ZRCB4BBGB459

.shadow {
    -moz-box-shadow: 0 0 5px #222; /* Firefox */
    -webkit-box-shadow: 0 0 5px #222; /* Safari, Chrome, etc. */
    box-shadow: 0 0 5px #222; /* CSS3 Standard */
}

Jedoch muss man auch hier noch mit Vendor Prefixes arbeiten, da noch nicht alle Browser die Standarddefinition von CSS3 unterstützen.

Da diese aber wahrscheinlich in naher Zukunft überflüssig werden, macht es Sinn, die Standarddefinition an’s Ende zu stellen, da diese so die höchste Priorität erhält.

Diese Definition funktioniert in allen modernen Browsern – fehlt noch der Internet Explorer, der in der Version 8 gerade mal so knapp CSS2 auf die Reihe kriegt.

Der Box Shadow kann mit den Microsoft Filtern recht praktisch gelöst werden:

.shadow {
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=0, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=45, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=90, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=180, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=225, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=260, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=305, Strength=2);
}

Nicht besonders elegant – aber es funktioniert.

Oft macht es dann auch Sinn, die IE Fixes in eine separate CSS Datei auszulagern, z.B. iefix.css.

Somit wird das Ganze wieder ein wenig übersichtlicher.

Wichtig: Bei Blockelementen muss eine Hintergrundfarbe definiert sein, damit alte IE’s die Anweisungen korrekt rendern.