Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 23

Thread: shadow on imgs

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by mburt View Post
    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>
    - John
    ________________________

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

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

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

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

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

    Default

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

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

    Default

    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>
    - Mike

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

    Default

    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
    - Mike

  6. #16
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

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

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

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

    Default

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

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

    Default

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

  9. #19
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

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

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

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

    Default

    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.
    - 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
  •