#Flat Shadow by Pete R. A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements Created by Pete R., Founder of BucketListly
License: Attribution-ShareAlike 4.0 International
To use this on your website, simply include the latest jQuery library found here together with jquery.flatshadow.js into your document's <head>, follow by the html markup and a function call as follows:
<div class="flat-icon"> FLAT </div> <div class="flat-icon"> UI </div> ...
$(".flat-icon").flatshadow({ color: "#2ecc71", // Background color of elements inside. (Color will be random if left unassigned) angle: "SE", // Shadows direction. Available options: N, NE, E, SE, S, SW, W and NW. (Angle will be random if left unassigned) fade: true, // Gradient shadow effect boxShadow: "#d7cfb9" // Color of the Container's shadow });
With jquery.flatshadow.js, you can apply each individual elements with different effect by simply add a data-color and data-angle to your mark up as follows:
<div data-color="#2ecc71" data-angle="NE" class="flat-icon"> FLAT </div> <div data-color="#1ABC9C" data-angle="NW" class="flat-icon"> UI </div>
and remove the color and angle global options as seen here:
$(".flat-icon").flatshadow({ fade: true, boxShadow: "#d7cfb9" });
Now, each individual element will have its own effect without you calling the function multiple times.