Results 1 to 2 of 2

Thread: [CSS Gradient Shadow] Custom RGB Color doesn't work on FFx

  1. #1
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question [CSS Gradient Shadow] Custom RGB Color doesn't work on FFx

    1) Script Title:
    CSS Gradient Shadow

    2) Script URL (on DD):
    http://www.dynamicdrive.com/style/cs...adient-shadow/

    3) Describe problem:
    Changing the color seems to work fine if you have an acceptable color name ("black," "red," "blue," etc.), but creating a custom color (rrr bbb ggg) only seems to work on IE. I am testing with IE6 and FFx 3.0.10. Thank you for any assistance.

    Here is the code with my modifications:
    HTML
    Code:
    <div id="greenbox" class="shadow" rel="205 255 170">
      <p>Lorum Ipsum<br />
    •&nbsp;dolor sit amet,<br />
    •&nbsp;consectetur adipisicing elit,<br />
    •&nbsp;sed do</p>
    </div>
    CSS
    Code:
    /*
    CSS Gradient Shadow
    FROM: http://www.dynamicdrive.com/style/csslibrary/item/css-gradient-shadow/
    FOR: cross-browser compatible, transparent graduated shadow on containers
    */
    .shadow{
    	position:relative;
    	display:inline;
    	z-index:100;
    	overflow: visible;
    	background-color: #CDFFAA;
    	width: 250px;
    }
    
    .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
    }
    Javascript
    I added size/positioning. Gimme teh creditz!
    Code:
    var gradientshadow={}
    gradientshadow.depth = 5 // Depth of shadow in pixels
    gradientshadow.direction = "se" // Where shadow will fall.  Options: n,ne,e,se,s,sw,w,nw,center // TOFIX: center appears solid.  n,e,s,w align against topmost/leftmost rather than centered.
    gradientshadow.ResizeAmount = -5 // symmetrically shrink (or grow) shadow by pixels, relative to element
    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
    			
    			// make part of page
    			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)
    			// resize
    			  shadowdiv.style.width = (gradientshadow.containers[i].offsetWidth + gradientshadow.ResizeAmount) + "px"
    			  shadowdiv.style.height = (gradientshadow.containers[i].offsetHeight + gradientshadow.ResizeAmount) + "px"
    			  
    			// position adjustment and size
    			//// options: n,ne,e,se,s,sw,w,nw,center
    			//// method: push away from centered by ±x
    			//// notes: can only move left and top edges.
    			////  take resize into account so shadow doesn't disappear
    			var oleft = gradientshadow.containers[i].offsetLeft
    			var otop = gradientshadow.containers[i].offsetTop
    			var aresize = Math.abs(gradientshadow.ResizeAmount)
    			
    			switch (gradientshadow.direction)
    			{
    			case "center":
    			  shadowdiv.style.left = oleft + (-(gradientshadow.ResizeAmount/2)) + "px"
    			  shadowdiv.style.top = otop + (-(gradientshadow.ResizeAmount/2)) + "px"
    			  break
    			case "n":
    			  shadowdiv.style.left = oleft + 0 + "px"
    			  shadowdiv.style.top = otop + (-x) + "px"
    			  break
    			case "ne":
    			  shadowdiv.style.left = oleft + x + aresize + "px"
    			  shadowdiv.style.top = otop + (-x) + "px"
    			  break
    			case "e":
    			  shadowdiv.style.left = oleft + x + aresize + "px"
    			  shadowdiv.style.top = otop + 0 + "px"
    			  break
    			case "se":
    			  shadowdiv.style.left = oleft + x + aresize + "px"
    			  shadowdiv.style.top = otop + x + aresize + "px"
    			  break
    			case "s":
    			  shadowdiv.style.left = oleft + 0 + "px"
    			  shadowdiv.style.top = otop + x + aresize + "px"
    			  break
    			case "sw":
    			  shadowdiv.style.left = oleft + (-x) + "px"
    			  shadowdiv.style.top = otop + x + aresize + "px"
    			  break
    			case "w":
    			  shadowdiv.style.left = oleft + (-x) + "px"
    			  shadowdiv.style.top = otop + 0 + "px"
    			  break
    			case "nw":
    			  shadowdiv.style.left = oleft + (-x) + "px"
    			  shadowdiv.style.top = otop + (-x) + "px"
    			  break
    			default:
    			  // same as se
    			  shadowdiv.style.left = oleft + x + aresize + "px"
    			  shadowdiv.style.top = otop + x + aresize + "px"
    			  break
    			}
    		}
    	}
    }
    }
    
    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

  2. #2
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Anyone gonna help? I tried converting to hex instead of rgb, too. Still the same.

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
  •