jQuery Plugin For Flat Long Shadows Generator - Dynamic Shadow Color

File Size: 139 KB
Views Total: 1127
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Flat Long Shadows Generator - Dynamic Shadow Color

Dynamic Shadow Color is a jQuery plugin for generating trendy fashion flat long shadow effects for your html elements. Great for the present popular flat web design concept.

See also:

How to use it:

1. Include the jQuery library, jQuery xcolor and jQuery dynamic shadow color plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/dynamic_shadow_color.min.js"></script>

2. Add CSS class “shadow-object” to the Html element that needs shadow. Add CSSclass “shadow-section” to the element's parent.

<div class="shadow-section">
<div class="shadow-object"></div>
</div>
</div>

3. You can pass options to the flat long shadows by using the data-* attribute on your legend.

<div class="shadow-section" 
data-size="15"   <!-- Size of the shadow -->
data-fade="3" <!-- fade effect -->
data-opacity="0.3"  <!-- opacity -->
data-placement="right-top" <!-- right-bottom, right-top, left-bottom, left-top -->
>
<div class="shadow-object"></div>
</div>
</div>

This awesome jQuery plugin is developed by jettinghe. For more Advanced Usages, please check the demo page or visit the official website.