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.