Dynamic Drive CSS Library- CSS Gradient Shadow

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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

Everytime I visit this site I get something new to learn. It will help me in my all projects. Thanks..

Posted by Mandar on 12/18, 05:58 AM

i realy like the script but i want to know if you can change the direction of the shadow?

Posted by marvin on 01/25, 11:50 AM

Just what I needed! Many thanks!

Posted by hein on 02/14, 03:05 PM

That is awesome! it looks very great!

Posted by Forumistan on 03/13, 05:21 PM

Great tutorials. I just found it today.And will implement in my works.

Posted by Anju patel on 04/23, 10:30 PM

nice and helpful article

Posted by akshay on 05/03, 07:17 PM

This is very nice tutorial.

God live long you. Thank you very much!

Posted by Hitesh on 07/04, 04:18 AM

Very interesting and something worth playing around with

Posted by Flash Guy on 07/07, 11:45 PM

Great tutorial; however, using z-index in the style sheets can cause problems in some situations. To correct ths, delete the two z-index lines from the styles and replace this code:

document.body.appendChild(newSd)

with this code:

a[i].parentNode.insertBefore(newSd, a[i])
i++;

Posted by Preston Park on 07/17, 05:58 PM

Nice idea...
Another one for my list at http://www.kirkdesigns.co.uk/css-shadows-a-drop-shadow-roundup

Posted by Tom on 08/08, 07:34 PM

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

Commenting is not available in this weblog entry.