Real cross browser box-shadow

If you want more css functionality, ccs3Pie gives you all the functionality you need. If you only need box-shadows – read on. This method is easier than css3Pie, since it doesn’t use VML.

Internet Explorer versions below version 9 doesn’t have the css3 box-shadow property. You can use the dropshadow filter, but this filter creates a solid dropshadow. It is not really what we want. To create real drop shadow for ie8, ie7 and ie6 we apply the Blur filter.

I have used this technique to create box-shadows on Aftenposten for over a year, but only as markup hidden in conditional comments. With this html-component the box-shadow just works.


Just add the file dropshadow.htc using IE behaviours and Internet Explorer will display propert dropshadows.

[Example]

<!--[if lt IE 9]>
<style type= "text/css">
	#dropshadow {
		behavior:url(dropshadow.htc);
	}
</style>
<![endif]-->
<style = "text/css">
	#dropshadow {
		box-shadow:5px 5px 10px #ccc;
	}
</style>

Here is the code for dropshadow.htc

<public:attach event="oncontentready" onevent="oncontentready()" />

<script type="text/javascript">
	function oncontentready() {
		var dropShadow=window.document.createElement('div');
		dropShadow.setAttribute('class','dropShadow');
		var innerWrapper = window.document.createElement('div');

		element.style.position = (element.currentStyle['position'] == 'static') ? 'relative' : element.currentStyle['position'];
		innerWrapper.style.position = "relative";
		innerWrapper.style.zIndex = "2";
		innerWrapper.style.backgroundColor = "#ffffff";

		var html = element.innerHTML;
		element.innerHTML = '';
		innerWrapper.innerHTML = html;
		element.appendChild(innerWrapper);
		element.appendChild(dropShadow);

		var style = this.currentStyle['box-shadow'].split(' ');
		var shadowX = style[0].replace('px','');
		var shadowY = style[1].replace('px','');
		var shadowWidth = style[2].replace('px','');
		var shadowColor = style[3];
		dropShadow.style.position='absolute';
		dropShadow.style.left=(shadowX-shadowWidth)+'px';
		dropShadow.style.top=(shadowY-shadowWidth)+'px';
		dropShadow.style.zIndex=1;
		dropShadow.style.width='100%';
		dropShadow.style.height='100%';
		dropShadow.style.background=shadowColor;

		var sProperties = "pixelradius="+shadowWidth+", makeShadow=true, ShadowOpacity=0.5";
		dropShadow.style.filter = "progid:DXImageTransform.Microsoft.Blur("+sProperties+")";

	}
</script>

About Tor Brekke Skjøtskift

Senior Webdesigner Media Norge Digital
This entry was posted in CSS, IE Behaviours, Javascript. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>