Advanced Search

Results 1 to 4 of 4

Thread: CSS Gradient Shadow : surround, not diagonal ?

  1. #1
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Gradient Shadow : surround, not diagonal ?

    Hi,

    I 'd like to use the CSS / Javascript method described here :
    http://www.dynamicdrive.com/style/cs...ent-shadow/P0/

    How can I have the shadow surround a DIV, an image or whatever ?
    Like in the image below :



    Thanks,

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    See if this basic example helps
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.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;
    font:10pt arial;
    position:relative;
    display:inline;
    background:white;
    z-index:100
    }
    
    .shadow_inner{
    overflow:hidden;
    position:absolute;
    top: -1000px;
    filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/
    opacity:0.1; /*firefox 1.5 opacity*/
    -moz-opacity:0.1; /*mozilla opacity*/
    -khtml-opacity:0.1; /*opacity*/
    z-index:10
    }
    
    </style>
    
    <script type="text/javascript">
    
    var gradientshadow={}
    gradientshadow.depth=6 //Depth of shadow in pixels
    gradientshadow.containers=[]
    
    gradientshadow.create=function(){
    var a = document.all ? document.all : document.getElementsByTagName('*')
    for (var i = 0;i < a.length;i++) {
    	if (a[i].className == "shadow") {
    		for (var x=0; x<gradientshadow.depth; x++){
    			var newSd = document.createElement("DIV")
    			newSd.className = "shadow_inner"
    			newSd.id="shadow"+gradientshadow.containers.length+"_"+x //Each shadow DIV has an id of "shadowL_X" (L=index of target element, X=index of shadow (depth) 
    			if (a[i].getAttribute("rel"))
    				newSd.style.background = a[i].getAttribute("rel")
    			else
    				newSd.style.background = "black" //default shadow color if none specified
    			document.body.appendChild(newSd)
    		}
    	gradientshadow.containers[gradientshadow.containers.length]=a[i]
    	}
    }
    gradientshadow.position()
    window.onresize=function(){
    	gradientshadow.position()
    }
    }
    
    gradientshadow.position=function(){
    if (gradientshadow.containers.length>0){
    	for (var i=0; i<gradientshadow.containers.length; i++){
    		for (var x=0; x<gradientshadow.depth; x++){
      		var shadowdiv=document.getElementById("shadow"+i+"_"+x)
    			shadowdiv.style.width = gradientshadow.containers[i].offsetWidth + "px"
    			shadowdiv.style.height = gradientshadow.containers[i].offsetHeight + "px"
    			shadowdiv.style.left = gradientshadow.containers[i].offsetLeft + x + "px"
    			shadowdiv.style.top = gradientshadow.containers[i].offsetTop + x + "px"
    		}
    	}
    }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", gradientshadow.create, false)
    else if (window.attachEvent)
    window.attachEvent("onload", gradientshadow.create)
    else if (document.getElementById)
    window.onload=gradientshadow.create
    
    </script>
    </head>
    <body>
    <div class="shadow" rel="blue">
    <img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" /><br />
    </div>
    <br/>
    <div class="shadow" rel="green" style="padding:4px;">
    This is my second div
    </div>
    <br/><br/><br/>
    <div class="shadow" rel="red" style="padding:4px;margin-top:20px;">
    This is my third div
    </div>
    </body>
    </html>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks but it doesn't work (tested on FF 2.0 and IE 7)

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Not working?

    Could you provide a link to the page you were referring?..I tested the codes i've given..and it works on IE6,7 and FF2
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

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
  •