1

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?

1
  • Have you tried using a background image where the image is your desired shadow?
    – itodd
    Sep 21, 2018 at 1:33

2 Answers 2

0

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.

3
  • Thank you for researching this issue. Sep 21, 2018 at 9:33
  • It's not fun to accept there may be no way other than javascript sometimes for a beginner like me. Thanks again. Sep 21, 2018 at 9:34
  • I was able to figure out a solution to the question i had. Sep 21, 2018 at 12:28
0

I found a solution after hours of tweaking things.

This only works if you want to push the inset shadow's div to the edges of the screen. There is probably a way to make it work without having to use the edges of the screen to hide the non-inset shadows, but I'm not sure how.

Lucky for me, that's nothing to worry about for my website.

Here is a picture of the final result:

enter image description here

Here is the code:

#box {
/* Make sure to set it to min-width so you can push the outside "Microsoft Shadow" out of the screen to the left, right, bottom, and top, because the shadow adds pixels to the 100% width whether you set it to width:100% or not, but if you set it to 100% width, you won't be able to make the margin push the outside shadow out. */
  min-width: 100%;
  /* For some reason, the above rule is not the case for height. I'm not sure why for Internet Explorer. */
  height:100%;
  position: relative;
  /* I discoverd the shadow won't even appear unless there is a boder of the same div. That's no big deal, just push the boder out too, along with the bleeding outside Mirosoft Shadow". */
  border: solid 1px black;
  /* This code is for the Microsoft Shadow (boxshadow for Internet Explorer 5.5 through 8 alternative). Please note how there needs to be a seperate shadow for each direction, starting at zero degrees and the last direction is 270 degrees. */
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=270);
/* For the child, (child id is called "box")... you can only push out the content to the bottom and right, because of the natural left to right, top to bottom HTML layout. */
  margin-bottom: -39px;
  margin-right:130px;
}
.box-parent-fix {
/* This appears to be a hack as far as I know, the bleeding Microsoft Shadow (not the inset part, the outside part is what I'm talking about) will only be pushed out if it has a parent with the follow CSS: */
    position: relative;
    min-width: 100%;
    height: 100%;
}
.box-parent {
/* For the child, (child id is called "box")... you can only push out the content to the bottom and right, because of the natural left to right, top to bottom HTML layout. */
    margin-top:-49px;
    margin-left:-44px;
    height:100%;
    min-width:100%;
    background-color: white;
    position: relative;
}
body {
    position: relative;
    height: 100%;
    min-width:100%;
/* This hides the pushed out bleeding non-inset Microsoft Shadow.  Please excuse my ugly sentence, haha. The inset shadow isn't hidden because it's inside the screen.*/
    overflow-y: hidden;
    overflow-x: hidden;
}
<body>
    <div class="box-parent-fix">
        <div class="box-parent">
            <div id="box">

            </div>
        </div>
    </div>
</body>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.