Author: | DSlike |
---|---|
Views Total: | 763 views |
Official Page: | Go to website |
Last Update: | February 25, 2020 |
License: | MIT |
Preview:

Description:
A JavaScript and Canvas based image shadow generator which exacts colors from your image and applies them to the box-shadow of the image.
The plugin also adds an interactive blur effect to the shadow around the image that auto adjusts the size on hover.
How to use it:
Download and import the Image Shadow Generator library into the html file.
<script src="isg.js"></script>
Add the CSS class _isg
to your image.
<img src="example.jpg" class="_isg"/>
Initialize the Image Shadow Generator and done.
let isg = new ImageShadowGenerator();
Set the offset of the box-shadow.
let isg = new ImageShadowGenerator({ offsetX: 0, offsetY: 50 });
Override the default CSS selector.
let isg = new ImageShadowGenerator({ imgClass: '_isg' });
Config the blur effect.
let isg = new ImageShadowGenerator({ shadowBlur: 40, hoverBlurSize: 90 hover: true });
Enable the debug mode.
let isg = new ImageShadowGenerator({ debug: true });
Changelog:
02/25/2020
- Fixed problem with multiple images and double negative mark in styles