CSS3 Box-Shadow for Legacy IEs
HTML Source
<![CDATA[
<div class="shadow">
<div class="content">
Box-shadowed element
</div>
</div>
]]>
CSS Source
<![CDATA[
.shadow {
margin: 40px;
background-color: rgb(68,68,68); /* Needed for IEs */
-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.45);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.45)";
zoom: 1;
}
.shadow .content {
position: relative; /* This protects the inner element from being blurred */
padding: 100px;
background-color: #DDD;
}
]]>
Example in the Wild
http://panda.samsung.at/
Christian ”Schepp” Schaefer is a freelance web developer living in Düsseldorf, Germany. He is the author of CSS-JS-Booster and co-author of Turbine CSS Framework and follows your tweets under his account derSchepp.