Code Mamba

Code snippets

box-shadow in Internet Explorer 8

without comments

Internet Explorer 8 does not support box-shadow property.
If you want a similar effect in Internet Explorer 8 you can use the combination of Internet Explorer-only filters:

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=0);
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=90);
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=180);
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=270);

Here’s how to combine them:

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=0),
	progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=90),
	progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=180),
	progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=270);

Here’s our test code:

<div id="test"></div>

and here are our stylesheets for Internet Explorer 8 and Internet Explorer 9:

	#test
	{
		width:100px;
		height:100px;
		border:1px solid black;
		box-shadow:0 0 1.0em hsla(0, 0%, 0%, 0.3);
		/* IE 9 */
	}
	#test
	{
		width:100px;
		height:100px;
		border:1px solid black;
		filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=0),
		progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=90),
		progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=180),
		progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=270);
		/* IE 8 */
	}

and here’s how it looks in Internet Explorer 8 and in Internet Explorer 9:
Internet Explorer 8 and in Internet Explorer 9 box-shadows
You might want to try and play with the Strength property of the filters.

Written by Wyand

November 14th, 2011 at 2:59 pm

Posted in HTML

Tagged with , ,

Leave a Reply