Dynamic Drive CSS Library- CSS Gradient Shadow

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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 3 of 7 pages < 1 2 3 4 5 > Last »

Somebody please tell me how to change the place of the shadow. Thanks

Posted by Deepti on 06/15, 04:45 AM

I applied this code to a table and it works great in IE7. When I use firefox 2 the table gets all jumbled up. Is there any fix for this?

Posted by matt on 06/22, 09:22 PM

sorry,but it does not work in firefox

Posted by linda on 07/11, 12:31 AM

I copied the script exactly and in Safari the shadow kept coming on the top left and in firefox it came in the right spot.

But on the sample page provided the shadow was in the right spot in safari.
HELP!

Posted by Naomie on 07/12, 11:10 AM

I like the code, but I'm having trouble getting it to show up in IE. The sample page on dynamicdrive.com shows it correctly, so I'm sure it's just how Ipm positioning the code. I copied and pasted the CSS into my head section. It works in Firefox, but not IE. please help!

Posted by Mike on 08/07, 12:05 PM

Java "creep"??
I left this page open for maybe an hour while I poked about doing other things.
When I came back - the "shadow" boxes had creeped an inch to the LEFT and another 1/4" down - making HUGE colored boxes on the screen

??

FF 2.0.0.6 here. Switching the rendering engine to IE changed the "shadows" to SOLID red and blue boxes!

Posted by Don V on 09/12, 11:18 PM

super!love it!

Posted by Seema Johnson on 09/29, 11:20 PM

Nice.. put more plssss

Posted by Inan on 10/29, 02:02 AM

i need code of create 3 level menu in javascript. if your can able to send me code. i shall always be greatful to you ?
Thanks and best regards.
Diwakar Tiwari.

Posted by Diwakar Tiwari on 11/06, 02:00 AM

That's interesting..
But it have problem in IE and on resize window shadow's position changes, and it looks like two divs one with image and other is shadow.

can i have some solution for it

Posted by Satyanarayan Patidar on 12/08, 02:03 AM

Comment Pages 3 of 7 pages < 1 2 3 4 5 > Last »

Commenting is not available in this weblog entry.