Real Shadow - jQuery Plugin that casts photorealistic shadows

Perfect for eye-catching demos and landing pages.

Works in any browser supporting CSS box-shadow property.

What's new

• possibility to update shadows during/after jQuery animations
• possibility to set custom shadow length
• inset shadows
• optimizations
• corrected shadow positions
• chaining support

Basic Usage

$(selector).realshadow(); // options are optional

$(selector).realshadow({

	followMouse: false,   // true by default

	pageX:       x,       // x coordinate of the light source
	pageY:       y        // y coordinate of the light source

	c: {                  // shadow color
		r: 1,             // red   channel for shadow
		g: 1,             // green channel for shadow
		b: 1,             // blue  channel for shadow
	}

});

To specify different colors for each element, you can use "rel" attribute:

<span rel="r"></span>
<span rel="g"></span>
<span rel="b"></span>
<span rel="rg"></span>
<span rel="gb"></span>
<span rel="br"></span>
<span rel="rgb"></span>

$('span').realshadow();

Inset Shadows

$(selector).realshadow({
	inset: true
});

Update shadows during/after jQuery animations

// before: apply Real Shadow to elements:
$(selector).realshadow(/* options, if needed */);

// update shadows during jQuery animation, i.e. each animation step:
$(selector).animate(/* animated properties */, {step: $.fn.realshadow.update});

// update shadows after jQuery animation is over:
$(selector).animate(/* animated properties */, $.fn.realshadow.update);

If you update shadows during jQuery animation, you don't need to update shadows after jQuery animation is over.

Custom shadows length

$(selector).realshadow({
	length: 5 // default is 7
});

If you suppose that the usage of Real Shadow is unclear, feel free to contact me.