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

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.

Cоmmеnts (46):
  1. 39

    thank you very much. For this excellent post.

  2. 40
    @
    Yehuda said:

    Is there a similar .htc file to allow the use of text-shadow in IE?

  3. 41

    is possible make this effect also if include a jQuery Shadow Plugin

  4. 43

    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 http://www.theotherhome.com but in Internet explorer shows like a spot help me out

  5. 44

    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

  6. 45

    -webkit-box-shadow: -1px 13px 25px #DEDEDE;

    NOT WORKING FOR CHROME PL HELP

    • 46

      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.

Соmmеnt раgеs: « 1 2
Lеаvе а Соmmеnt

© 2009–2014 Dimox.net  •  Privacy Policy