Hi, I'm a web developer and blogger from Russia. My nickname is Dimox.
Sorry for my English, it's not my native. Read more about me and my blog.

Cross-browser CSS3 box-shadow

180110'
Cross-browser CSS3 box-shadow
Written by Dimox

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:

.rounded-corners {
  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.

Category: CSS

Comments on: "Cross-browser CSS3 box-shadow" (3)

  1. Thank you so much,
    just today I get this lesson but on Arabic.

  2. Cool! Thanks!

  3. thanks, this was very helpful

Leave a comment





Tag Cloud