[DHTML] Gradient Shadow Script

**mburt** · 01-08-2007, 01:07 AM

1) CODE TITLE: Gradient Shadow Script

2) AUTHOR NAME/NOTES: Michael Burt

3) DESCRIPTION: This script displays a sort of, gradient type shadow effect on any html tag.

4) URL TO CODE: http://galaxydefense.ga.funpic.org/w...ign/shadow.php

Color/Depth/Transparency can be user defined by messing with the css code. There are comments next to each line where you can change it.

**yoshi555** · 01-08-2007, 01:08 AM

Intresting

**djr33** · 01-08-2007, 01:17 AM

Looks cool to me. Does it work on other things as well, such as an image?

**mburt** · 01-08-2007, 01:54 AM

I would'nt see why not? Let me test it.

**mburt** · 01-08-2007, 01:55 AM

And yes, it does work.

/EDIT: WOW! POST # 1000

**Twey** · 01-08-2007, 05:23 AM

Nice. Pity about the lack of opacity effects in Konqueror, but I guess we've only the KHTML devs to blame

Congratulations on the thousandth post.

**jscheuer1** · 01-08-2007, 06:49 AM

As I told you before, all of these lines should have (as shown in red):

Code:

newSd.style.width = a[i].offsetWidth + 'px';
newSd.style.height = a[i].offsetHeight + 'px';
newSd.style.left = a[i].offsetLeft + x + 'px';
newSd.style.top = a[i].offsetTop + x + 'px';

But, even better would be a pure css/HTML method which would be easy enough. Just write out what your script is generating. Or, if you have FF with the developer's extension, view the generated source:

Code:

<html><head><title>Shadow Script</title>
<style type="text/css">
.shadow {
border:1px solid silver;
padding:2px;
font:10pt arial;
position:relative;
display:inline;
background:white;
z-index:100
}
.shadow2 {
overflow:hidden;
background:black; /*modify to change the shade color*/
position:absolute;
filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/
opacity:0.1;
-moz-opacity:0.1;
-khtml-opacity:0.1;
z-index:0
}
</style></head><body>
<div class="shadow">Short text</div>
<br><br><div class="shadow" style="display: block;">Paragraph.
<br>Line 2
<br>Line 3</div>
<br><a href="#" class="shadow">Link Test</a>

<br><br><img class="shadow" src="http://www.dynamicdrive.com/ddincludes/logo.gif" alt="Test Image">
<div style="width: 63px; height: 22px; left: 8px; top: 7px;" class="shadow2"></div><div style="width: 63px; height: 22px; left: 9px; top: 8px;" class="shadow2"></div><div style="width: 63px; height: 22px; left: 10px; top: 9px;" class="shadow2"></div><div style="width: 63px; height: 22px; left: 11px; top: 10px;" class="shadow2"></div><div style="width: 63px; height: 22px; left: 12px; top: 11px;" class="shadow2"></div><div style="width: 1424px; height: 54px; left: 8px; top: 48px;" class="shadow2"></div><div style="width: 1424px; height: 54px; left: 9px; top: 49px;" class="shadow2"></div><div style="width: 1424px; height: 54px; left: 10px; top: 50px;" class="shadow2"></div><div style="width: 1424px; height: 54px; left: 11px; top: 51px;" class="shadow2"></div><div style="width: 1424px; height: 54px; left: 12px; top: 52px;" class="shadow2"></div><div style="width: 59px; height: 22px; left: 8px; top: 121px;" class="shadow2"></div><div style="width: 59px; height: 22px; left: 9px; top: 122px;" class="shadow2"></div><div style="width: 59px; height: 22px; left: 10px; top: 123px;" class="shadow2"></div><div style="width: 59px; height: 22px; left: 11px; top: 124px;" class="shadow2"></div><div style="width: 59px; height: 22px; left: 12px; top: 125px;" class="shadow2"></div><div style="width: 273px; height: 61px; left: 8px; top: 162px;" class="shadow2"></div><div style="width: 273px; height: 61px; left: 9px; top: 163px;" class="shadow2"></div><div style="width: 273px; height: 61px; left: 10px; top: 164px;" class="shadow2"></div><div style="width: 273px; height: 61px; left: 11px; top: 165px;" class="shadow2"></div><div style="width: 273px; height: 61px; left: 12px; top: 166px;" class="shadow2"></div></body></html>

**mburt** · 01-08-2007, 11:11 AM

Modification:
"id" attribute defines shading color. Several different graphic colors in example:
http://galaxydefense.ga.funpic.org/w...ign/shadow.php

Usage:

Code:

<div class="shadow" id="purple">Shadow Text Here</div>

**ddadmin** · 01-08-2007, 12:44 PM

Interesting! I thought I remember CSS supporting shadows by default in some browsers already (CSS3 spec). Maybe not. I'll have to do some testing on how well this effect holds up in the major browsers before putting it up.

Code:

But, even better would be a pure css/HTML method which would be easy enough.

In this case I actually have to disagree. I think apart from the scripting approach being cleaner, the div used to generate the shadow effect is dynamically created- as it should be- versus existing physically on the page as extraneous markup.