CSS3 box-shadow für Internet Explorer 6-8

16

So funktioniert CSS3 Schlagschatten(box-shadow) auch im Internet Explorer. Sogar ab Version 6!

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:

.shadow {
    -moz-box-shadow: 0 0 5px #222; /*Mozilla-basierte Browser (z.B. Firefox)*/
    -webkit-box-shadow: 0 0 5px #222; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
    box-shadow: 0 0 5px #222; /*CSS3 Standard*/
}

Wie man sieht, muss man für die verschiedenen Browser noch spezielle Regeln verwenden (sog. Vendor-Prefixes). Diese werden aber wohl in nicht all zu ferner Zukunft überflüssig werden. Daher macht es Sinn, die Definition ohne Prefix ans Ende zu stellen–somit erhält sie die höchste Priorität.

Der oben stehende Code funktioniert in allen modernen Browsern:

  • Safari 3+
  • Firefox 3.5+
  • Opera 10.5+

Fehlt noch… der Internet Explorer, der selbst in der aktuellen Version 8 gerade mal so CSS2 auf die Reihe bekommt.

Was zuerst nach einem hoffnunglosen Unterfangen aussieht, kann recht praktikabel gelöst werden, durch den Einsatz des Microsoft Shadow Filters:

.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);
    -moz-box-shadow: 0 0 5px #222; /*Mozilla-basierte Browser (z.B. Firefox)*/
    -webkit-box-shadow: 0 0 5px #222; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
    box-shadow: 0 0 5px #222; /*CSS3 Standard*/
}

Nicht sonderlich elegant, aber auf diese Weise kann man die CSS3 box-shadow Eigenschaft annähernd identisch im IE emulieren–ohne überflüssiges Markup und Grafiken. Die zusätzliche Eigenschaft »zoom« ist notwendig, um diversen Darstellungsfehler vorzubeugen.

Und so sieht das dann aus:

Box-shadow Firefox 3.6

CSS3 box-shadow im Firefox 3.6

Box-shadow im Internet Explorer

Box-shadow im Internet Explorer

Onlinedemo im Labor

Erfolgreich getestet habe ich diese Methode im Internet Explorer 6, 7 und 8.

Weiterführende Links zum Thema »CSS3 box-shadow«:

Foto: http://www.flickr.com/photos/ranopamas/ / CC BY-ND 2.0

Foto

Hallo, mein Name ist Mario Fink –
Webentwickler mit einer Vorliebe für leicht verständliche und gut bedienbare Webseiten.

Folge mir auf Twitter oder schreibe mir ein paar Zeilen.

Veröffentlicht am 6. April 2010

16 Antworten zu “CSS3 box-shadow für Internet Explorer 6-8”

  1. metalAAS
    29. Januar 2011 um 17:54

    Auf meinem Metal Blog habe ich runde Ecken, Transparenzeffekte, Farbverläufe, Schatten und CSS3-Buttons realisiert. Eine wahre Freude! Für den IE mache ich mir keine Mühe. Da gibts nur eine ganz einfache Fallback-Lösung und einen Hinweis, doch bitte den Browser zu wechseln. Meine Ignoranz mag vielen Internetnutzern vor den Kopf stoßen. Aber jeder, der etwas im Web baut, hat sich schon viel zu lange mit dem IE rumgeärgert. Irgendwann muss halt jeder für sich entscheiden, wie lang man das noch mitmachen will.

  2. flow3
    25. Februar 2011 um 12:50

    Ich versuche gerade deine Lösung für ein Div-Element mit Text zu übernehmen. Leider tritt der gewünschte Effekt dann an den Textzeichen auf und nicht an der Box selbst..
    Hat jemand eine Idee?
    qwertz

  3. mario
    25. Februar 2011 um 13:08

    @flow3:
    Dieser Fehler tritt auf, wenn für das DIV kein Hintergrund angegeben wurde. Versuche bspw. einfach mal background: #fff; zur .shadow Klasse hinzu zu fügen. Das sollte das Problem lösen.

  4. flow3
    25. Februar 2011 um 15:09

    Krass! ;)

    Vielen Dank, das war die Lösung!

  5. mario
    25. Februar 2011 um 18:04

    Freut mich, dass ich helfen konnte.

  6. kaybeeco
    18. März 2011 um 16:45

    Ich muss aufgrund meiner Zielgruppe auch auf den InternetExplorer setzen. Ich habe den Code wie oben eingebaut, jedoch kommt es zu einem Anzeigefehler im IE, nämlich: Mein Div-Konstrukt (eine übergeordnete Div mit Schatten, darin eine Head-Box und eine Content-Box) verschiebt sich um geschätzt ca. 5px, sodass der Text der Content-Box links über der Rand und den Schatten hinausragt. Gibt es irgendeine Erklärung bzw. Lösung dafür?

    Desweiteren bleibt der CSS-Validator des W3C immer an der Stelle mit den Erweiterungen für den IE hängen, sogar bei Auswahl von CSS3. Da doch aber das hervorragende Ergebnis sehr leicht erzielt wurde, werde ich das wohl akzeptieren müssen.

    Gruß

  7. mario
    20. März 2011 um 15:26

    Wie kaybeeco festgestellt hat, führt die hier beschriebene Technik dazu, dass kein W3C-valider CSS Code entsteht. Denn die Microsoft Filter sind alles andere als Standard.

    @kaybeeco: Das von dir zuerst beschriebene Problem hängt wohl möglich mit den netten Eigenheiten des IEs im Bezug auf das CSS-Boxmodel zusammen. Welche Version des Internet Explorers benutzt Du denn?

  8. Abhischek
    18. August 2011 um 13:22

    Ich habe das selbe Problem wie flow3:
    “Ich versuche gerade deine Lösung für ein Div-Element mit Text zu übernehmen. Leider tritt der gewünschte Effekt dann an den Textzeichen auf und nicht an der Box selbst..
    Hat jemand eine Idee?”

    Nur muss ich background-color: transparent; setzten. Auch background: transparent funktioniert nicht. Kann mir irgendwer helfen?
    Muss nur für Internet Explorer 8 funktionieren

  9. Stefan
    22. September 2011 um 19:50

    Und ich habe das Problem, zwei Filter kombinieren zu müssen – gradient und shadow. Nur für IE8. Das funktioniert aber nicht. Weiß jemand die Syntax für die Kombination?

  10. Uli
    13. Dezember 2011 um 14:30

    Ich kann MetalAAS nur zustimmen. Seine Seite im IE ist ordentlich und fehlerfrei. Besser sieht sie im Firefox aus – was der IE-User aber in der Regel nicht weiß.

    Dies “hinter dem IE herentwickeln” bin ich auch leid und lasse dies weitestgehend aus – wenn immer nur das Design betrifft.

    @MetalAAS: bei deinem Hinweisfenster oben rechts solltest du dann dem unbedarften IE-User auch die Links für die Browser anbieten.

Pingbacks
  1. CSS3 box-shadow im Internet Explorer emulieren | maYO's Weblog wrote:
    6. April 2010 um 18:45

    [...] CSS3 box-shadow für Internet Explorer 6-8 [...]

  2. CSS3 erleben – als Entwickler « knallisworld wrote:
    8. Mai 2010 um 23:51

    [...] Beispiel für umfangreiche vollständigen Schatten in allen Browsern. [...]

  3. Anonymous wrote:
    23. Januar 2011 um 21:57

    [...] [...]

  4. Internet Explorer – CSS Fixes über Fixes | TASTELESS wrote:
    21. April 2011 um 11:23

    [...] Quelle: http://mariofink.de/code/css3-box-shadow-fuer-internet-explorer-6-8/ [...]

  5. Box Shadow – Generator wrote:
    13. Dezember 2011 um 10:09

    [...] Eine ausführliche Erklärung mit Beispiel findet ihr auf MarioFink.de [...]

Kommentar schreiben