Cross-browser CSS3 box-shadow

There is a simple way for creating cross-browser box-shadow
in all modern and popular browsers including Internet Explorer (Opera only since 10.50 pre-alpha version). The essence of the solution is very similar to cross-browser border-radius, it also uses VML and behaviour
.
box-shadow for modern browsers (except IE8)
You can use following code for Firefox, Safari, Chrome and Opera 10.50 pre-alpha:
.box-shadow { -moz-box-shadow: 10px 10px 10px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */ box-shadow: 10px 10px 10px #000; /* CSS3 */ }
If you are using an up to date version of Firefox, Safari or Chrome, it’s enough to use just this CSS:
.box-shadow { box-shadow: 10px 10px 10px #000; /* CSS3 */ }
box-shadow for Internet Explorer
Download the ie-css3.htc file, put it in the same place where your CSS file, and then use this CSS code for Internet Explorer to make box-shadow
:
.box-shadow { behavior: url(ie-css3.htc); }
It’s reasonable to connect this CSS through conditional comments.
Cross-browser box-shadow demo
In the following example you can see the demonstration of both CSS3 styles – border-radius
and box-shadow
:
Turn your attention on few limitations while using these solutions for IE.
thank you very much. For this excellent post.
Is there a similar .htc file to allow the use of text-shadow in IE?
is possible make this effect also if include a jQuery Shadow Plugin
cheers !!
I used this coding
#leftnav{
width:35%; float:left; margin-top:20px;
background-color:#FFFFCC; /* 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.30);
-ms-filter: “progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)”;
}
for my website www.theotherhome.com but in Internet explorer shows like a spot help me out
when i use ie-css3.htc and box-shadow, the site rendred very slow.
menu of my site has java script effects and my menu not work correctly.
menus move very slowly.
please help
-webkit-box-shadow: -1px 13px 25px #DEDEDE;
NOT WORKING FOR CHROME PL HELP
did you just put in that one line, or did you also do box-shadow. although -webkit- should work for chrome, as that is the point in it, it is no longer necessary as both chrome and safari now work with the proper CSS3 box-shadow.