The Book of Ryan

Powered by addOnion.

AddOnion creates drop shadows (or other visual effects) by adding layered div elements around the specified element. These elements using the Onion Skinned Drop Shadows method published in A List Apart by Brian Williams. The script requires the following styles:

• .onion-rt
• .onion-rc
• .onion-rb
• .onion-cb
• .onion-lb

This script must be called from another script, feeding it the element reference. For example, on this page we call the script:

window.onload=function() {
    var div, ps;
    div=document.getElementById("onionTarget");
    ps=div.getElementsByTagName("p");
    for (i=0;i<ps.length;i++) {
        addOnion(ps[i]);
    }
}

And HTML:

<div id="onionTarget">
    <p>This is a paragraph</p> 
    <p>This is another paragraph</p>
</div>

And the CSS:

div.onion-rt { background: transparent url("images/onion-rt.gif") no-repeat right top }
div.onion-rc { background: transparent url("images/onion-rc.gif") repeat-y right center }
div.onion-rb { background: transparent url("images/onion-rb.gif") no-repeat right bottom;
        padding: 0 7px 10px 0 }
div.onion-cb {
    background: transparent url("images/onion-cb.gif") repeat-x center bottom;
    margin: 1.12em 0 }
div.onion-lb { background: transparent url("images/onion-lb.gif") no-repeat left bottom }
div#onionTarget p { border: 1px solid black; padding: 0.5em 1ex }

Yields: