Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: [DHTML] Gradient Shadow Script

  1. #1
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default [DHTML] Gradient Shadow Script

    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.
    Last edited by mburt; 01-08-2007 at 08:08 PM.
    - Mike

  2. #2
    Join Date
    Dec 2006
    Location
    In my home
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Intresting

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Looks cool to me. Does it work on other things as well, such as an image?
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

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

  5. #5
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    And yes, it does work.

    /EDIT: WOW! POST # 1000
    - Mike

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    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>
    Last edited by mburt; 01-08-2007 at 08:09 PM.
    - Mike

  9. #9
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  10. #10
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Quote Originally Posted by ddadmin
    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.
    - Mike

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •