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
CSSCode:<div id="greenbox" class="shadow" rel="205 255 170"> <p>Lorum Ipsum<br /> • dolor sit amet,<br /> • consectetur adipisicing elit,<br /> • sed do</p> </div>
JavascriptCode:/* 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 }
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


Reply With Quote
Bookmarks