CSS Gradient Shadow : surround, not diagonal ?

**saadovitch** · 04-15-2008, 02:09 PM

Hi,

I 'd like to use the CSS / Javascript method described here :
http://www.dynamicdrive.com/style/cs...ent-shadow/P0/

How can I have the shadow surround a DIV, an image or whatever ?
Like in the image below :

Thanks,

**rangana** · 04-16-2008, 01:31 AM

See if this basic example helps

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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>
</head>
<body>
<div class="shadow" rel="blue">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" /><br />
</div>
<br/>
<div class="shadow" rel="green" style="padding:4px;">
This is my second div
</div>
<br/><br/><br/>
<div class="shadow" rel="red" style="padding:4px;margin-top:20px;">
This is my third div
</div>
</body>
</html>

**saadovitch** · 04-16-2008, 04:05 PM

Thanks but it doesn't work (tested on FF 2.0 and IE 7)

**rangana** · 04-16-2008, 11:56 PM

Not working?

Could you provide a link to the page you were referring?..I tested the codes i've given..and it works on IE6,7 and FF2

Thread: CSS Gradient Shadow : surround, not diagonal ?

Thread Tools

Search Thread

CSS Gradient Shadow : surround, not diagonal ?

Bookmarks

Bookmarks

Posting Permissions