box-shadow in Internet Explorer 8

Do you know we’ve moved on a new address. There will be no new articles on this blog anymore. If you still want to keep in touch with us, follow us @ Code Mamba!You can read the same article on our new domain by clicking here!
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:

You might want to try and play with the Strength property of the filters.