Transparent shadows in IE

Question

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

Which versions of IE do you need to support? IE6, IE7, IE8, IE9? — scunliffe, Jul 15 '11 at 14:21

Spudley · Accepted Answer · 2011-07-15T14:38:45.373

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.

Ok, thanks for explanation! At least I know it couldn't be done :) — Daniel, Jul 15 '11 at 15:14

score 0 · Answer 2 · answered Jul 15 '11 at 14:37

0

You'll need to use custom MS settings for pre IE8

/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

Havent tested this but you can google for more info. source

answered Jul 15 '11 at 14:37

Doug McK

468
5
15

1

I tried this, but it affects only the whole opacity, not only the shadow :/ – Daniel Jul 15 '11 at 15:13

Transparent shadows in IE

2 Answers2