Skip to content

Commit a78d526

Browse files
peachananrpeachananr
committed
Add documentation and demo
1 parent 0ae7af6 commit a78d526

2 files changed

Lines changed: 107 additions & 3 deletions

File tree

‎README.md‎

Lines changed: 53 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,54 @@
1-
flat-shadow
2-
===========
3-
1+
#Flat Shadow by Pete R.
42
A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements
3+
Created by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com)
4+
5+
## Usage
6+
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 `<head>` and call the function like this:
7+
8+
````html
9+
<div class="flat-icon"> FLAT </div>
10+
<div class="flat-icon"> UI </div>
11+
...
12+
````
13+
14+
````javascript
15+
$(".flat-icon").flatshadow({
16+
color: "#2ecc71",
17+
angle: "SE",
18+
fade: true,
19+
boxShadow: "#d7cfb9"
20+
});
21+
````
22+
23+
### Color
24+
The color option allows you to assign a background color to all your elements at once. Color will be random if empty.
25+
26+
### Angle
27+
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.
28+
29+
### Fade
30+
The fade option will turn the flat shadow effect into a gradient shadow effect.
31+
32+
### boxShadow
33+
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".
34+
35+
## Further Customization
36+
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:
37+
38+
````html
39+
<div data-color="#2ecc71" data-angle="NE" class="flat-icon"> FLAT </div>
40+
<div data-color="#1ABC9C" data-angle="NW" class="flat-icon"> UI </div>
41+
````
42+
and remove the color and angle global options as seen here:
43+
44+
````javascript
45+
$(".flat-icon").flatshadow({
46+
fade: true,
47+
boxShadow: "#d7cfb9"
48+
});
49+
````
50+
51+
Now, each individual element will have its own effect without you calling the function multiple times.
52+
53+
## Other Resources
54+
- Tutorial (Coming Soon)

‎demo.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery Flat Shadow by Pete R.</title>
6+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
7+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
8+
<script type="text/javascript" src="jquery.flatshadow.js"></script>
9+
<style>
10+
11+
body {
12+
background: #f9af4e;
13+
padding: 170px 0;
14+
text-align: center;
15+
}
16+
17+
.flat-icon {
18+
text-align: center;
19+
font-family: 'open sans';
20+
padding:23px 28px;
21+
font-weight: bold;
22+
display: inline-block;
23+
line-height: 100%;
24+
overflow: hidden;
25+
text-transform: uppercase;
26+
margin-right: 15px;
27+
width: 40px;
28+
font-size: 50px;
29+
border-radius: 50px;
30+
-moz-border-radius: 50px;
31+
-webkit-border-radius: 50px;
32+
}
33+
</style>
34+
<script>
35+
$(document).ready(function(){
36+
$(".flat-icon").flatshadow({
37+
fade: true,
38+
boxShadow: "#ce892f"
39+
});
40+
});
41+
42+
</script>
43+
</head>
44+
<body>
45+
<div data-angle="N" class="flat-icon"> A </div>
46+
<div data-angle="NE" class="flat-icon"> B </div>
47+
<div data-angle="E" class="flat-icon"> C </div>
48+
<div data-angle="SE" class="flat-icon"> D </div>
49+
<div data-angle="S" class="flat-icon"> E </div>
50+
<div data-angle="SW" class="flat-icon"> F </div>
51+
<div data-angle="W" class="flat-icon"> G </div>
52+
<div data-angle="NW" class="flat-icon"> H </div>
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)