A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
demo.html
jquery.flatshadow.js Added support for passing random as a value of the elements color or … Aug 14, 2013
jquery.flatshadow.min.js

README.md

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

Flat Shadow

Demo

View demo

Usage

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
});

Further Customization

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.

Other Resources