Today, we are showing you a quick and very easy way to create flat shadows in your design projects. To do so you will need a small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements. It is created by Pete R., founder of BucketListly.
It has got the following options :
- color: Background color of elements inside.
- angle: Shadows direction. Available options: N, NE, E, SE, S, SW, W and NW.
- fade: Gradient shadow effect.
- boxShadow: Color of the Container’s shadow.
Image may be NSFW.
Clik here to view.
DEMO | DOWNLOAD
How to use
To use this on your website, simply include the latest jQuery library found here together withjquery.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
});
How to customise
With jquery.flatshadow.js, you can apply each individual elements with different effect by simply add adata-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.
