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 6 of 7 pages « First < 4 5 6 7 >

Thanks for this post.

Posted by rhamz on 02/17, 06:15 AM

Hm… This is really fresh idea of the design of the site! I seldom met such in Internet… Good Work!
Disk encryption software - Powerful encryption software with pre-boot authentication secures 100% of your hard disk drive, including the OS.

Posted by Disk encryption software on 03/01, 01:09 AM

Hi all, i used the code in a site that i make and i have a problem if the image that i apply the shadow effect is in a div that oveflows (appears the scrollbar on the side). When the above situation happens and you try to scroll down, the shadow remains pinned to the initial position.
Any comments on this?
Thanks

Posted by Sbile on 03/07, 04:05 AM

Is there any way to make this code work in anything else besides IE? I can "see" the drop shadow from my firefox browser here, but when I build it - nada. Any thoughts?

Posted by Mair on 03/22, 07:34 AM

never mind. I got it. Thanks

Posted by Mair on 03/22, 09:15 AM

I've been trying to assign the class="shadow" to different elements. I'm having trouble with only one - the table. It actually assigns the drop shadow TO the table, but it funks up and doesn't acknowledge anything inside of it. However, in IE the whole thing works perfect. It's just FF and safari that this happens to - in fact, in safari the whole table disappears. Am i missing something? (besides the fact that I am using tables and should be using div's - there's a reason for this that are to numerous to get into here) http://treasuretoursjamaica.com/experiment/dstest

Posted by Perplexed on 03/23, 06:04 AM

http://treasuretoursjamaica.com/experiment/screencap.htm
These are screencaps of what happens in each browser.

Weird eh?

Posted by Perplexed on 03/23, 06:37 AM

I like the script. Works perfectly on images, tables, etc. But I was wondering if this could be added to a css drop down menu. I've tried adding the (div class="shadow") and it works, but the shadow appears even before the menu drops down and stays after, never appearing only on mouse over which is what I want it to do. Now I've tried an "onmouseover" code, and it works, but the shadow doesn't appear, only the menu style. Any ideas?

Posted by John on 05/02, 02:21 AM

It's really nice. I got some diff idea and used in my site intelioftbd.com. Finally i saw this one is faster so i'm diverting to this.

------
Free SEO Text Brower

Posted by freelance seo expert on 05/05, 07:40 PM

find it on http://www.sristiconstructions.com

Posted by aaaa on 05/17, 12:13 AM

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

Commenting is not available in this weblog entry.