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

Nice article. I am going to implement it soon. Let's wait and see at http://AquariumFishExporter.com.

Posted by PohEe.com on 01/15, 12:02 AM

This is a very nice way of adding shadows to pictures. Great work.
I adapted on my website a similar approach to show shadows on pictures. It is from Stu Nichols www.cssplay.co.uk. This particular way of using shadows uses only CSS.

Posted by anton on 01/15, 09:15 AM

Can this be made to have it so the top-right and bottom left corners are straight, instead of diagonal? And a softer shadow?

Posted by MarioGamer99 on 01/15, 12:19 PM

looks useful. but i noticed that in firefox, increasing/decreasing the text size caused the whole layout to be "corrupted". i don't think that it would be the best idea for accessibility.

Posted by nepalsites on 01/19, 06:22 AM

Good observation. I did not see that either.
I think this could be avoided with a little bit tinkering on the CSS Side. As in my Case in http://finaltouchinteriors.com this does not happen, but I also don't use Javascript to create the Shadows.

Posted by anton on 01/19, 09:22 AM

Great techique DD, but can't this be done with the use of JS. I'd like to see everything kept strickly CSS.

Posted by Kiazen Maven on 01/22, 05:47 PM

Stu Nichols from www.cssplay.co.uk. He shows on his web site techniques with CSS only, another link is 456bereastreet.com/lab/teaser/flexible/
both are great in using CSS.

Posted by anton on 01/22, 06:14 PM

no image, cool, thanks..

Posted by portal.im on 02/05, 10:55 AM

nice script....but can it smhow b used to giv an entire pg a shadow?

Posted by mandar on 02/05, 01:19 PM

You might want to add a ; after the z-index lines in the css. It may not have any adverse affect, but it's one of those things that would be better done than left as is...

Posted by Jonathan Young on 02/09, 08:58 PM

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

Commenting is not available in this weblog entry.