Search code examples
htmlcssinternet-explorer-8box-shadow

Inset boxshadow alternative for Internet Explorer 8

I am very close to getting an inset boxshadow for IE8 without the need for JavaScript.

Here is a screenshot:

enter image description here

Because Internet Explorer 5.5 through 8 only supports Microsoft's "dropshadows" and "shadows" instead of boxshadows, I have to use this code:

#box {
  /* CSS for all browsers.  Note if there is no background-color, the box will be transparent */
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=270);
}
<body>
    <div id="box">

    </div>
</body>

(The shadow only displays in IE5.5 through 8 because shadows and dropshadows were removed from IE9, replaced by boxshadows).

I am able to remove the shadow from the inside of the box by doing this: 

#box {
  /* CSS for all browsers.  Note there is now a background-color, the box will not be transparent */
  background-color:white;
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=270);
}
<body>
    <div id="box">

    </div>
</body>

Then it looks like this:

enter image description here

But how would I be able to make an inset shadow only, where the outside shadow is gone?

Solution

  • As per my searching, I find that you can create other shadows with only CSS but I did not get any documentation for create a inset shadow.

    I find some tutorials to create inset shadow in IE 8 but those are using javascript which you don't want to use.

    So other then that, I did not get any way to create inset shadow just using CSS in IE 8.

    If possible for you then you can try to avoid using inset shadow and use any other shadow which is supported by IE.