shadow on imgs

**jscheuer1** · 01-07-2007, 04:13 AM

Originally Posted by mburt

Regarding the z-index, it's impossible to make the first one lap over the shadow. .shadow2 has position:absolute, which automatically makes it on top, no matter what the z-index is :confused:

Not impossible:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.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;
padding:2px;
font:10pt arial;
display:inline;
background-color:white;
position:relative;
top:20px;
z-index:1;
}
.shadow2 {
overflow:hidden;
background-color:black;
position:absolute;
filter:alpha(Opacity=20);
opacity:0.2;
-moz-opacity:0.2;
-khtml-opacity:0.2
}
</style>
<script type="text/javascript">
onload = function() {
for (var i = 0, a = document.getElementsByTagName("DIV");i < a.length;i++) {
	if (a[i].className == "shadow") {
		var newSd = document.createElement("DIV")
		newSd.className = "shadow2"
		newSd.style.width = a[i].offsetWidth+'px'
		newSd.style.height = a[i].offsetHeight+'px'
		newSd.style.left = a[i].offsetLeft + 4+'px'
		newSd.style.top = a[i].offsetTop + 4+'px'
		document.body.appendChild(newSd)
		}
	}
}
</script>
</head>
<body>
<div class="shadow">Test 1</div>
<br><br><div class="shadow">Test Number 2</div>
</body>
</html>

**jscheuer1** · 01-07-2007, 04:51 AM

Oh, and while we are on the subject, there is tons of stuff available on the web about this:

http://www.google.com/search?client=...utf-8&oe=utf-8

**mburt** · 01-07-2007, 02:20 PM

The example I gave isn't horrible though, and it works. So I see no reason why anyone shouldn't use it.

**mburt** · 01-07-2007, 02:27 PM

I've made an improvement, it now works with any tag with the class "shadow".
Ex:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.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;
padding:2px;
font:10pt arial;
display:inline;
background-color:white;
position:relative;
top:20px;
z-index:1;
}
.shadow2 {
overflow:hidden;
background-color:#D0D0D0;
position:absolute
}
</style>
<script type="text/javascript">
onload = function() {
var a = document.all
for (var i = 0;i < a.length;i++) {
	if (a[i].className == "shadow") {
		var newSd = document.createElement("DIV")
		newSd.className = "shadow2"
		newSd.style.width = a[i].offsetWidth+'px'
		newSd.style.height = a[i].offsetHeight+'px'
		newSd.style.left = a[i].offsetLeft + 4+'px'
		newSd.style.top = a[i].offsetTop + 4+'px'
		document.body.appendChild(newSd)
		}
	}
}
</script>
</head>
<body>
<a href="#" class="shadow">Test 1</a>
<br><br><div class="shadow">Test Number 2</div>
<br><br><i class="shadow">Test</i>
</body>
</html>

**mburt** · 01-07-2007, 02:29 PM

Argg.. Nevermind, I forgot, document.all only works in IE... I can't remember the same keyword for FF...
Should it be something like this:

Code:

var a = document.all ? document.all : document.getElementById

**jscheuer1** · 01-07-2007, 05:47 PM

Code:

var a=document.all? document.all : document.getElementsByTagName('*');

Note: I'm not sure if these are exactly equivalent but, for the purpose at hand, they will be. There is also a document.allTags or something like that which is supported only by IE and perhaps other document.all compatible browsers.

**mburt** · 01-07-2007, 06:05 PM

Oh man, thanks jscheuer, how did you come up with that? Anyways, at least now it's working

**mburt** · 01-07-2007, 11:39 PM

Found this in DD's CSS section. It produces an almost identical solution:
http://www.dynamicdrive.com/style/cs...-drop-shadows/
No javascript.

**jscheuer1** · 01-07-2007, 11:45 PM

That's what I am talking about, there are so many ways. An all css method is best for obvious reasons, that is why I am against javascript solutions. There are some more elaborate css solutions that yield a more dramatic or natural looking shadow.

**mburt** · 01-07-2007, 11:47 PM

Personally, I just found making a DHTML script easier to make then a CSS script (not my strongest area). But I agree, CSS is better in this case.

Thread: shadow on imgs

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions