box-shadow im Internet Explorer und andere CSS3 Effekte

Durch CSS 3 hat man ja schöne Möglichkeiten: z.B. sehr einfach einem DIV einen Schlagschatten zu geben.

 

.schlagschatten {
-moz-box-shadow: 10px 10px 10px #000; /* Firefox */ 
-webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
box-shadow: 10px 10px 10px #000; /* CSS3 */
}

 

 

Das funktioniert überall sehr gut nur eben der Internet Explorer kleiner als Version 9 kann das nicht. Es gibt dafür eine sehr schöne Lösung: Css3Pie.

Es handelt sich hierbei um eine kleine Bibliothek die man einfach in seine Webseite einbindet. Und man muss diese Datei dann nur noch im CSS aufrufen.

behavior: url(path/to/PIE.htc);

Und das funktioniert nicht nur mit Schlagschatten sondern es gehen auch folgende Effekte:

border-radius

box-shadow

border-image

CSS3 Backgrounds (-pie-background)

Gradients

RGBA Color Values

PIE Custom Properties

-pie-watch-ancestors

PNG alpha transparency and -pie-png-fix

Lazy Initialization (-pie-lazy-init)

Layout polling (-pie-poll)

Und das gibts auch als Drupal Modul: css3pie-modul