diff --git a/README.md b/README.md index 96f098b..b879e69 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,54 @@ -flat-shadow -=========== - +#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) + +## Usage +To use `jquery.flatshadow.js` on your website, simply include the latest jQuery library found here together with `jquery.flatshadow.js` into your document's `
` and call the function like this: + +````html + + +... +```` + +````javascript +$(".flat-icon").flatshadow({ + color: "#2ecc71", + angle: "SE", + fade: true, + boxShadow: "#d7cfb9" +}); +```` + +### Color +The color option allows you to assign a background color to all your elements at once. Color will be random if empty. + +### Angle +The angle option allows you to assign the direction (N, NE, E, SE, S, SW, W and NW ) of the shadow of the elements inside. Angle will be random if empty. + +### Fade +The fade option will turn the flat shadow effect into a gradient shadow effect. + +### boxShadow +The boxShadow allows you to apply the same shadow effect to the container of the elements. The option accept a 6 hex color code. For example, "#000000". + +## 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 + + +```` +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 (Coming Soon) \ No newline at end of file diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..c94ade6 --- /dev/null +++ b/demo.html @@ -0,0 +1,54 @@ + + + + +