Quick and Easy jQuery Flat Shadows

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.

jquery-flat-shadows

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.

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close