Christoph S. Ackermann

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Lust auf mehr?

Interview mit Bijoux Stadelmann: Wie hat die Coronavirus-Krise ihre Geschäftssituation verändert?

Anna Gottschalk
“Drastisch”, erzählt uns die fröhliche Nicole Stadelmann am …
Blogbeitrag ansehen

Über Pfingsten geschlossen

Fabienne Mast
Liebe Besucherin, lieber Besucher Unser Büro ist über …
Blogbeitrag ansehen

Berner Solidarität

Sarah Berger
Solidarität gehört momentan zum Schweizer Alltag, wie für …
Blogbeitrag ansehen