Dynamic Drive CSS Library- CSS Gradient Shadow

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

Advertise Here

CSS Library: DIVs and containers: Here

CSS Gradient Shadow

Author: Michael Burt

This is a CSS and JavaScript technique that lets you add a shadow to most elements on your page with a customizable shadow depth and coloring. Just give the element in question a class name of "shadow" to activate the effect.

The CSS:

<style type="text/css">

.shadow{
border:1px solid silver;
font:10pt arial;
position:relative;
display:inline;
background:white;
z-index:100
}

.shadow_inner{
overflow:hidden;
position:absolute;
top: -1000px;
filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/
opacity:0.1; /*firefox 1.5 opacity*/
-moz-opacity:0.1; /*mozilla opacity*/
-khtml-opacity:0.1; /*opacity*/
z-index:10
}

</style>

<script type="text/javascript">

var gradientshadow={}
gradientshadow.depth=6 //Depth of shadow in pixels
gradientshadow.containers=[]

gradientshadow.create=function(){
var a = document.all ? document.all : document.getElementsByTagName('*')
for (var i = 0;i < a.length;i++) {
	if (a[i].className == "shadow") {
		for (var x=0; x<gradientshadow.depth; x++){
			var newSd = document.createElement("DIV")
			newSd.className = "shadow_inner"
			newSd.id="shadow"+gradientshadow.containers.length+"_"+x //Each shadow DIV has an id of "shadowL_X" (L=index of target element, X=index of shadow (depth) 
			if (a[i].getAttribute("rel"))
				newSd.style.background = a[i].getAttribute("rel")
			else
				newSd.style.background = "black" //default shadow color if none specified
			document.body.appendChild(newSd)
		}
	gradientshadow.containers[gradientshadow.containers.length]=a[i]
	}
}
gradientshadow.position()
window.onresize=function(){
	gradientshadow.position()
}
}

gradientshadow.position=function(){
if (gradientshadow.containers.length>0){
	for (var i=0; i<gradientshadow.containers.length; i++){
		for (var x=0; x<gradientshadow.depth; x++){
  		var shadowdiv=document.getElementById("shadow"+i+"_"+x)
			shadowdiv.style.width = gradientshadow.containers[i].offsetWidth + "px"
			shadowdiv.style.height = gradientshadow.containers[i].offsetHeight + "px"
			shadowdiv.style.left = gradientshadow.containers[i].offsetLeft + x + "px"
			shadowdiv.style.top = gradientshadow.containers[i].offsetTop + x + "px"
		}
	}
}
}

if (window.addEventListener)
window.addEventListener("load", gradientshadow.create, false)
else if (window.attachEvent)
window.attachEvent("onload", gradientshadow.create)
else if (document.getElementById)
window.onload=gradientshadow.create

</script>

The HTML:

<p class="shadow" style="display: block" rel="red">This is some paragraph.<br />Set display="block" inside it.<br />This is some paragraph.</p>

<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" class="shadow" rel="blue" /><br />

<p><a href="http://www.dynamicdrive.com" class="shadow" rel="green">Some link</a></p>

Code Info

Rate this code:

Date Posted: 01/14/2007

Revision History: None

Usage Terms: Click here

Your Comments (62)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 5 of 7 pages « First < 3 4 5 6 7 >

If I make a two columns liquid layout with the left column being static, always in view. Then can I add a shadow with this technique to the left column? If not how can I do it?

Posted by Totally new at CSS on 09/12, 10:55 PM

excellent work !! it really gives a nice effect..thanks

Posted by sagar on 09/21, 09:45 PM

I must be slow. 'Cut and pasted on test pages. 'Got the image and paragraph but no drop shadow. Shouldn't there be a link tag to give path information from the html to the css stylesheet?

Posted by cesare on 10/18, 08:57 PM

this is very good sameple code that i can use at my site http://www.cambodia-tourism.org

thanks

Posted by thanks you on 10/28, 12:48 AM

Really love this! Thank you so much!! Works in great in most browsers. Only I've been testing it (among other things) in IE8. It doesn't work in IE8, it does when you change the browser mode to IE7 or to IE8 Compatibilty View. I don't know JavaScript so I can't offer a solution. Just hoping someone else will.

Posted by Dilie on 11/17, 04:03 PM

This fails validation because of the need for the "rel" attribute on the div. Anyone know of a way around this so that it will pass validation?

Posted by Synergy on 11/28, 11:13 AM

Great shadow effect. I have implanted it at http://www.pricelessweddings.com.au which is oscommerce.

Posted by Decapper on 12/03, 10:57 PM

good concept

Posted by rajaash on 12/10, 01:37 AM

This only adds to page elements as a box. I was hoping for a cross-browser (CSS1) compatible version of text-shadow.

Posted by undrline on 12/20, 09:55 PM

Great work.
Can be very useful.

Please help. I wanna learn <b>Jscript (Advanced)</b>. Please give a reference to a great site. Sorry but i am just a beginner.

Posted by Haziq on 01/10, 10:35 PM

Comment Pages 5 of 7 pages « First < 3 4 5 6 7 >

Commenting is not available in this weblog entry.