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

extremely easy to implement and it works fine in both ie7 and ff2.0.0.1

have a look see at http://shiznit.no-ip.info/rjnall

Posted by Harlequin2k6 on 02/14, 09:34 PM

just a follow-up

I used the shadow around my main wrap but I can't get the shadow to work around the image...

Posted by Harlequin2k6 on 02/15, 09:19 PM

could not get this to work in expression web designer, can you do a tutorial for expression web?
thanks

Posted by rahdin on 02/26, 09:16 PM

Is there any way to get text for the shadow. I'm not a expert, so i need a little help here.

Posted by Connor on 03/26, 08:22 AM

this is a very interesting Website! This teaches me a lot of things in regards to CSS!

Posted by sonia pfeifle on 03/30, 02:08 AM

cool
it's very easy to use ~~

Posted by Endis on 05/01, 12:46 AM

I would also like to know how to put a shadow on the whole page

Posted by Penn Wooding on 05/15, 09:41 AM

nice script!

Posted by ray charles on 05/21, 10:52 AM

works really well, bit heavy though

Posted by ray on 05/28, 05:05 AM

The great tool ever i seen

Posted by Shaon on 06/05, 01:22 PM

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

Commenting is not available in this weblog entry.