Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
an image's average color can be its box shadow
JavaScript Ruby
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
spec/javascripts
src
Gemfile
Gemfile.lock
Rakefile
readme.textile

readme.textile

Average Shadow

Average Shadow is a jQuery plugin that generates a box shadow based on the average color of an image that it is applied to. For example:


 

Please note that for this to work, images must be served from the same file system (localhost or on a server).

Usage

Average Shadow can only be bound to images. If the browser doesn’t support HTML5 canvas, you may specify a fallback color with the option fallbackColor.

Apply it to element on your webpage like so:

$('img').avgShadow();

or with options

$('.my-cool-images').avgShadow({ horizontal: 10, vertical: 10, spread: 50 });

Options

option description default
horizontal sets the posisition of the horizontal shadow in pixels 0
vertical sets the position of the vertical shadow in pixels 0
blur sets the blur distance in pixels 10
spread sets the size of the shadow in pixels 5
inset uses an inset shadow instead of an outset shadow, a boolean false
fallbackColor color to fallback to if <canvas> is not supported (hex or rgb color value) null

Run Tests

If you want to test Average Shadow you must do so in browser. This is the case because browsers consider getting the data of an image that is served over a local file system to be a security issue.


Something went wrong with that request. Please try again.