Shadow
Created By Edgar Verle


You may also be interested in:
  • BetterTip -- A tool tip solution for jQuery
  • Fast -- Automatic file caching. Save bandwidth and money without the work; $0.35 per GB transfer and $0.01 per 1000 hits.
Shadow is a plugin for the JQuery library that allows you to easily create a shadow around a div. Shadow uses no images or css and is very lightweight.

Here's what Shadow can do:

Before After
this is some content
this is some content

Download Shadow

Documentation:

To use Shadow you first have to obtain the jQuery Library. Next you'll need to Download Shadow. This download contains a compressed version of Shadow as well as an uncompressed version. The compressed version is 2.34KB and the uncompressed version is 4.84KB.

In the header section of the page you want to use Shadow, you'll need to add references to jQuery and Shadow as follows:

<script type="text/javascript" src="path-to-jquery/jquery-1.1.3.1.js"></script>
<script type="text/javascript" src="path-to-shadow/jquery.shadow.js"></script>

Now you simply invoke the shadow method on a div. The shadow method takes one argument: a map of options. These options are as follows:
  • cornerHeight (Number) -- The height in pixels of the corners of the shadow. Default: 8
  • width (Number) -- The width in pixels of the shadow. Default: 4
  • startOpacity (Number) -- This is the opacity at the closest point to the object. Default: 80
  • endOpacity (Number) -- The opacity at the furthest point in the shadow from the object. Default: 20
  • color (String) -- The color of the shadow. Default: black
<script type="text/javascript">
    $(function(){
       $("#exampleDiv").shadow({
           width:5,
           startOpacity:60,
           endOpacity:10,
           cornerHeight:8,
           color:"#000000"
       });
    })
</script>


Before After
exampleDiv Before
exampleDiv After


Like what you see?