https://github.com/peachananr/flat-shadow

A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements
https://github.com/peachananr/flat-shadow

Last synced: about 2 months ago
JSON representation

A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements

• Host: GitHub
• URL: https://github.com/peachananr/flat-shadow
• Owner: peachananr
• Created: 2013-08-02T09:58:35.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2020-05-08T01:23:42.000Z (over 4 years ago)
• Last Synced: 2024-04-06T16:33:58.175Z (6 months ago)
• Language: HTML
• Homepage: http://peachananr.github.io/flat-shadow/demo.html
• Size: 17.6 KB
• Stars: 483
• Watchers: 40
• Forks: 104
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#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.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com)

License: [Attribution-ShareAlike 4.0 International](http://creativecommons.org/licenses/by-sa/4.0/deed.en_US)

## Demo

[View demo](http://peachananr.github.io/flat-shadow/demo.html)

## Usage

To use this on your website, simply include the latest jQuery library found here together with `jquery.flatshadow.js` into your document's ``, follow by the html markup and a function call as follows:

  

````html

 FLAT 

 UI 

...

````


````javascript

$(".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:

````html

 FLAT 

 UI 

````

and remove the color and angle global options as seen here:


````javascript

$(".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

- [Tutorial](http://www.onextrapixel.com/2013/08/09/add-depth-to-flat-ui-with-flat-shadow-js/)