28 Apr, 2010
Crossbrowser CSS drop shadow
Categoriën: crossbrowser |CSS3 |hack |IE5 |IE6 |IE7 |IE8 |ms-filter |solution
Drop shadow – ofwel de illusie dat iets zweeft en diepte heeft – wordt al jarenlang met afbeeldingen gedaan, ofwel met nuffige semi-CSS oplossingen.
CSS3 is nog niet voor elke browser 100%, maar drop shadow is één van de zaken die we nu reeds kunnen doen en het werkt in:
- Firefox 3.5+
- Safari 3+
- Google Chrome
- Opera 10.50
- Internet Explorer 5.5+
CSS
.shadow {
-moz-box-shadow: 3px 3px 4px #000; /* Firefox/Mozilla */
-webkit-box-shadow: 3px 3px 4px #000; /*Safari/Chrome */
box-shadow: 3px 3px 4px #000; /* Opera & hoe het zou moeten */
/* Voor IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* Voor IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Nartuurlijk zal je de ms-filter & filter via conditional comments laden?
