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).
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.
