PDA

View Full Version : [DHTML] Gradient Shadow Script



mburt
01-08-2007, 12: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/web_design/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, 12:08 AM
Intresting

djr33
01-08-2007, 12:17 AM
Looks cool to me. Does it work on other things as well, such as an image?

mburt
01-08-2007, 12:54 AM
I would'nt see why not? Let me test it.

mburt
01-08-2007, 12:55 AM
And yes, it does work.

/EDIT: WOW! POST # 1000

Twey
01-08-2007, 04:23 AM
Nice. Pity about the lack of opacity effects in Konqueror, but I guess we've only the KHTML devs to blame :p

Congratulations on the thousandth post.

jscheuer1
01-08-2007, 05:49 AM
As I told you before, all of these lines should have (as shown in red):


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:


<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, 10:11 AM
Modification:
"id" attribute defines shading color. Several different graphic colors in example:
http://galaxydefense.ga.funpic.org/web_design/shadow.php

Usage:

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

ddadmin
01-08-2007, 11:44 AM
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.


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.

mburt
01-08-2007, 06:09 PM
I'll have to do some testing on how well this effect holds up in the major browsers before putting it up
I only have Firefox and IE6, so thanks.

ddadmin
01-15-2007, 12:53 AM
Ok, just a note that your script is now posted: http://www.dynamicdrive.com/style/csslibrary/item/css-gradient-shadow/ I did some refactoring mainly to take care of the shadow not updating when the window is resized, plus collision stemming from "window.onload". Hope you don't mind. Also, I wasn't sure what site you wanted to link your credits to, so as is it just links to your profile on the forums. If you have a URL, please post it here.

Thanks!

mburt
02-02-2007, 06:53 PM
Well, my site is actually:
http://mburt.mb.funpic.org/

But can be also loaded as:
http://mburt.funpic.org/

boxxertrumps
02-02-2007, 10:31 PM
Script works in Mozzilla Firefox, Opera, IE7, and K-Melon