November 25, 2011

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


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.

CSS , CSS3 # , , ,
Share: / / /

You might also like

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This