Search code examples
cssrounded-cornersshadows

Transparent shadows in IE

I have the following code, which makes a box with rounded corners and shadow. It should be compatible with all browsers and it really is, but the thing is I need transparent shadow and IE doesn't support RGBA values :(

<style>
#box {
  width: 250px;
  height: 250px;
  background-color: #1e9ad3;
  padding: 20px;
  margin: 20px;

  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  behavior: url(PIE.htc);

  box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
  -webkit-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
}
</style>
<body>
  <div id="box">
    Hello world!
  </div>
</body>

Any suggestions how to do this? My "box" could be on different backgrounds, or on the background with texture, so that's why I can't make the color of shadow for example light grey.

Here's the live example: http://bbin.own.cz/box.html

Solution

  • The CSS3Pie documentation gives the answer.

    PIE parses RGBA color values wherever they are allowed. However it is only able to successfully render their opacity value in a few contexts. In all other contexts they will be rendered with the correct RGB color, but fully opaque. Here are the supported contexts in which the opacity will be rendered correctly:

    • The solid background-color as specified in the -pie-background property.
    • The color value of box-shadow, if the shadow has no blur.

    In short, the answer is no, this can't be done. IE simply doesn't support RGBA properly. CSS3Pie is able to do it in a few contexts, but a box shadow with a blur is not going to work.

    If CSS3Pie can't do it, then it's a pretty good bet that it simply isn't possible in IE.

    You'll be able to do it if you lose the blur, but of course that changes the whole effect, so it's not really a solution for you.