CSS box-shadow Cross-Browser: Schlagschatten auch im Internet Explorer
Inzwischen ist die Nutzung der CSS Box Shadow Eigenschaft ja schon recht weit verbreitet. Allerdings ergeben sich die altbekannten Probleme.
Die Eigenschaft ist noch nicht offiziell in der von den (meisten) Browsern aktuell verwendeten CSS Definition enthalten und so kochen die unterschiedlichen Browser ihr eigenes Süppchen.
Für diejenigen, die die Definition noch gar nicht kennen sollten:
[pastacode lang=“css“ message=“CSS“ highlight=““ provider=“manual“]
box-shadow: [xVersatz] [yVersatz] [Stärke] [Farbcode];
box-shadow: 3px 3px 4px #000000;[/pastacode]
Dieser Befehl zeichnet einen Schlagschatten um das Element, wobei dieser 3px nach rechts und 3px nach unten versetzt ist und die Größe 4px in der Farbe schwarz (#000000) hat.
Bei den Webkit basierten Browsern hilft in der Regel die Verwendung von -webkit-box-shadow, Browser wie Konqueror benötigen für diesen Befehl stattdessen -khtml-box-shadow und Mozilla Firefox arbeitet mit -moz-box-shadow.
Die Angabe von Versatz, Stärke und Farbe ist bei all diesen Befehlen gleich.
Ein Sonderfall ist der Internet Explorer, der die Angabe eines Box Shadows in dieser Art gar nicht unterstützt. Allerdings kann man sich auch hier durch ein wenig Tricksen mit der Microsoft-spezifischen filter CSS Eigenschaft helfen.
[pastacode lang=“css“ message=“CSS“ highlight=““ provider=“manual“]
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=4);[/pastacode]
Dieser Befehl zeichnet (zumindest in aktuellen Versionen) im Internet Explorer einen Schlagschatten (Dropshadow) nach rechts unten versetzt, entspricht also in etwa dem, was wir vorher mit den anderen CSS Befehlen erreicht haben.
Um im Internet Explorer einen Schatten zu zeichnen, der sowohl rechts, unten als auch links ist, kann man den filter Befehl auch kombinieren:
[pastacode lang=“css“ message=“CSS“ highlight=““ provider=“manual“]
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=4) progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=225, Strength=4);[/pastacode]
Man lässt ihn also einen Schatten nach rechts unten und einen nach links unten zeichnen. Dass die überlappenden Teile dabei nicht dunkler erscheinen, dafür sorgt der Internet Explorer zum Glück selbst.
Mit Hilfe dieser Befehle können wir nun also in allen gängigen Browsern für einen Schlagschatten sorgen, wenn sie auch nicht 100% gleich aussehen ist es immer noch komfortabler als mit Bildern zu arbeiten um die Schatten zu konstruieren. Mit den Werten für Farbe und Stärke muss man dabei etwas experimentieren, damit es möglichst ähnlich zu den anderen Browserdarstellungen aussieht. Auch wenn man es nicht genau hinbekommt – immer noch besser als gar kein Schatten.
Für den Internet Explorer empfiehlt es sich natürlich eine separate CSS Datei anzulegen, die mit
[pastacode lang=“markup“ message=“HTML“ highlight=““ provider=“manual“]
[/pastacode]
in der HTML Seite eingebunden wird.
Marius Burkard ist Diplom-Wirtschaftsinformatiker und arbeitet seit 2006 als selbstständiger Software-Entwickler und Linux-Server-Administrator mit der Firma pixcept KG. Er ist unter anderem mitverantwortlich für die Projekte Was-lese-ich.de und ISPProtect.
im IE8 funktioniert die Variante mit „filter: progid:DXImageTransform.Microsoft.Shadow“ leider nicht. Das klappt nur für IE 6-7! Welcher Befehl ist für den IE8 dann der richtige?
Bist du sicher?
Bei mir funktioniert die Variante auch im IE8. Kann es sein, dass du eventuell einen anderen Doctype verwenden musst, damit der Browser da mitmacht?
Ich hab schon ein paar verschiedene Doctypes probiert….eigentlich immer das selbe Ergebnis!! Momentan is es xhtml_trans. Welchen schlägst du vor?
Hm, der Doctype müsste eigentlich ok sein.
Funktioniert der im Artikel angegebene Demo-Link denn bei dir im IE8 auch nicht?
Doch, der funktioniert lustigerweise. Wenn ich mir da aus dem CSS den filter-Befehl raushol…klappts bei mir trotzdem ned :D! Kommt mir ein bisschen spanisch vor….
Am besten schickst du den Link zur Seite kurz per Mail, das ist nicht öffentlich, falls der Link noch nicht zugänglich sein soll.
http://www.xxxxxxxxxxx.yy (Mail hab ich keine gefunden von dir…..und danke für den Tip, die Domain Records waren noch falsch, sonst hätte es vorher schon geklappt)! Link sollte trotzdem noch nicht öffentlich sein 😀
Also zuerst einmal glaube ich, dass du den armen Browser mit deinem „-ms-filter“ Krams der zusätzlich drin steht durcheinander bringst, zumal dort auch noch Syntaxfehler drin sind (mindestens eine fehlende Klammer).
Dann würde ich diese MS-IE spezifischen Sachen in eine eigene CSS Datei auslagern, die mit conditional Comments im HTML eingebunden werden – Firefox zum Beispiel mag diese Filter Anweisungen nicht so sehr und schreibt sie zumindest in die „Informations“-Box der Fehlerkonsole. Muss ja nicht sein 😉
Dann würd ich die CSS mal aufräumen und alle Sachen rausnehmen, die mit den MS-Filtern zu tun haben (nicht nur auskommentieren, sondern löschen) und dann mit einem Filter Befehl an einer Stelle testen obs klappt.
Ich habe es im IE8 nur hinbekommen, indem ich zusätzlich background-color: #ffffff auf das DIV Element mit dem Schatten gesetzt hab.
Danke für diesen Artikel, der CSS boxen erklärt, um shadows einzufügen 🙂