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 so much,
just today I get this lesson but on Arabic.
Cool! Thanks!
thanks, this was very helpful
Thanks a lot! That’s exactly what I was looking for. I haven’t heard of .htc files before, but it is JS doing the trick, isn’t it?
Yes, of course.
wow i found my life sever
Oh my god. Thank you so much for this. I didn’t know that this little script existed, but it will make my design process so much easier.
Cool script. Thanks! It doesn’t behave well for me with relatively sized elements. On resize, the background shadow becomes detached. This may be specific to my CSS (the element is centred and 90% of the body height) – I wondered if anyone else has suffered this and knows how to fix it?
Also It would be good if it supported opacity: When I apply this to an element with border-radius and opacity (via an IE filter:alpha(opacity=50)) the opacity is lost. Perhaps the next version of this script could include support for opacity too?
I’m not author of the script.
Try this code for opacity… this supports for ie8
.opaque3 { // for IE8
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
}
from fetchak.com, just FYI
“…but instead Microsoft decided to ignore standards here and make them relative to the docroot instead…”
You have to put that file in your root dir, not in where you put css.
Microsoft oh Microsoft..
Hello! I’m sure I’m doing something wrong that still does not work on IE Workaround I have IE8 and I can not see the rounded edges and the shadow!
Aguie know it can be happening?
Thank you very much!
Jero.
I was looking for this since a long time. Finally I got it here. Thank you so much for sharing. I was looking for this trick to apply in http://www.mesabin.info.
Hope to see more and more use ful posts in the future.
Sabin
Just what i wanted. I must say though— IE makes life hard for me
ie-css3.htc is not working on ie. it is showing black color as background. Can any one advice what’s wrong i am doing….
For background any color other than #000 just doesn’t work in IE.
its not working in my ie7…while i did all suggest steps…
please let me know if you have suggestion…..
thankx in advance….
In wordpress to make this work I had to do 3 things:
1. download PIE instead of this version http://css3pie.com/ and just use the pie.htc file
2. Add to the body and the class with absolute value:
body {
color: #000000;
behavior: url(http://yoursite.com/PIE.htc);
}
.page {
width: 980px;
margin: 0 auto;
-moz-box-shadow: 0 0 8px 3px #666;
-webkit-box-shadow: 0 0 8px 3px#666;
box-shadow: 0 0 8px 3px #666;
background-color: #fff;
behavior: url(http://yoursite.com/PIE.htc);
}
note: replace yoursite.com
3. Drop the .htc file in the root of your website
CSS Sahdow For IE with tutorial here
Thanks a lot.
This saved my bacon, thanks so much.
Thanks a lot! :) It works.
Don’t forget to read:
http://css3pie.com/documentation/known-issues/#z-index
Thanks allot Tim!, yours did the trick, works like a charm!
It doesn’t work for me :(
I debug it and find some bugs in IE 9 (of course when developing).
Check the output in IE 6 & 8 but it doesn’t work :(
Excellent tutorial thanks!
I’ve now implemented box-shadows on my blog: http://www.theinspirationblog.net/
doesn’t work. fail.
I cannot see any effect, this does not work in any of 6/7/8 on my computer…
Yes, i got shadow boxes and round corner buttons to work on IE. I didn’t have to use
an absolute path just behavior: url(PIE.htc). I tried many other htc files but this one
really works! It doesn’t like rgb or rgba though. Be sure to use the W3C standards
when using colors. My page looks the same on all browser now!.
Thanks
Pamelapdh
Is there any possibility of getting “inset” to work with the box shadow?
Thanks for Share :) very Useful.
Is it possible to do an inset box-shadow? I’ve tried a few things, and I’m sure I’ve done it before, I just can’t work out how.
It looks like this:
box-shadow: inset 10px 10px 10px #000;.thanx. i had that all along, just couldn’t work out why it wasn’t displaying. turns out that (on chrome at least, haven’t checked the other browsers), if you try to do an inset shadow in a text-box in a form, it only works if you stylize the border too. if you leave it to the default border settings, it will not display any box-shadow, inset or otherwise.
thanks a lot for this, its great
I have to be able to use this:
-moz-box-shadow: 0 0 10px #555;
-webkit-box-shadow: 0 0 10px #555;
box-shadow: 0 0 10px #555;
in IE6 and IE7 and IE8. We do not have a lot of site visitors in iE9 as of yet.
However, when I save the .htc file to the appropriate location and add the line…
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the ‘box’ class */
just below the box-shadow: shown above, it does not render in IE at all.
I have one user that is on IE9 and it still does not work.