/* * this is the main function. it takes: * the id of the element to shade * the right offset * the bottom offset * true for a bigger shadow, false for a light one fix- recursive, shade left, i-1, shade up, i-1, i=0, stop */ function shade(name, rOffset, bOffset, dense) { var r = parseInt(rOffset); var b = parseInt(bOffset); var text = document.getElementById(name); var spacer = text.cloneNode(true); var parent = text.parentNode; var box = document.createElement("div"); //create the shadow nodes, the first is the middle dark one var s1 = makeShadowNode(r, b, 1, 1, "#aaaaaa", 2, text); if(dense) { var s2 = makeShadowNode(r+1, b, 0, 1, "#dddddd", 1, text); var s3 = makeShadowNode(r, b+1, 1, 0, "#dddddd", 1, text); var s4 = makeShadowNode(r-1, b, 2, 1, "#dddddd", 1, text); var s5 = makeShadowNode(r, b-1, 1, 2, "#dddddd", 1, text); } box.style.position = "relative"; //the spacer keeps other elements from covering the shadowed one spacer.style.color = "red"; spacer.style.visibility = "hidden"; spacer.style.zIndex = "-1"; spacer.style.paddingRight = r+1+"px"; //padding fixes some text wrap stuff spacer.style.paddingBottom = b+1+"px"; //patch up the original text text.style.zIndex += 3; text.style.position = "absolute"; text.style.paddingRight = r+1+"px"; //more padding text.style.paddingBottom = b+1+"px"; box.appendChild(s1); if(dense) { box.appendChild(s2); box.appendChild(s3); box.appendChild(s4); box.appendChild(s5); } box.appendChild(spacer); parent.insertBefore(box, text); box.insertBefore(text, s1); } //creates a shadow node function makeShadowNode(oR, oB, pR, pB, color, z, text) { var shadow = text.cloneNode(true); shadow.id = "shadow"; shadow.style.position = "absolute" shadow.style.color = color; shadow.style.zIndex = z; shadow.style.top = oB + "px"; //reposition the text shadow.style.left = oR + "px"; shadow.style.paddingRight = pR + "px"; //fix the wrapping shadow.style.paddingBottom = pB + "px"; return shadow; } /* example use:
some text