FancyShadow

FancyShadow Icon

FancyShadow is an unobtrusive, in MooTools written JavaScript class, that applies a fancy looking shadow to any block or inline elements.

License

FancyShadow is licensed under a MIT License.

Downloads

FancyShadow requires the ultrasmall JavaScript library Mootools (v1.2). It doesn’t require any other Plugins.

Download FancyShadow v1.0

Usage

Firstly Mootools, fancyshadow.js and fancyshadow.css must be included. Add these few lines to the <head> of your page:

<script type="text/javascript" src="path/to/mootools.js"></script>
<script type="text/javascript" src="path/to/fancyshadow.js"></script>
<link rel="stylesheet" href="fancyshadow.css" type="text/css" media="screen" />

Please keep the shadow-*.png pictures in the same folder as fancyshadow.css.

Now you can add shadows to all elements, which has the class shadow:

// Class FancyShadow(elements [, options]);

window.addEvent('load', function() {
    new FancyShadow($$('.shadow'), { showMethod: 'show' });
});

Better use the load event instead of domready, otherwise script will maybe calculate a false width value when used on images

elements
must be an array of elements: $ function doesn’t work, instead: $$ function
options
hash of options

Options

duration
duration of the transition, if showMethod is in
showMethod
can either be in (shadow will appear with a soft transition) or show (shadow will appear instantly)

Technique

FancyShadow creates 8 extra <div>s inside the given element:

  • div.fancyshadow.top
  • div.fancyshadow.left
  • div.fancyshadow.right
  • div.fancyshadow.bottom
  • div.fancyshadow.lt
  • div.fancyshadow.rt
  • div.fancyshadow.lb
  • div.fancyshadow.rb

You can style them individually in a CSS stylesheet. There’s one sample CSS file (fancyshadow.css) included in Downloads.

If an inline element is applied, FancyShadow will create a <div> wrapper for the inline element and calculates a width.

<img src="photo1.jpg" alt="Photo 1" />

<!-- will turn into -->

<div class="fancyshadow-wrapper" style="width: /* calculated width */;">
    <img src="photo1.jpg" alt="Photo 1" />
    <!-- 8 extra shadow divs -->
</div>

Changelog

Version 1.0 (23.07.2008)

  • Initial Release

Kommentar abgeben:

Markdown: **fett**, *kursiv*, `code`