jQuery Plugin For Flat UI Elements With Long Shadows - Flat Shadow

Flat Shadow is a small jQuery plugin which casts a long shadow for your flat UI elements. Long shadow is a web design technique that has become a quick trend in flat UI design.

See also:

• jQuery Plugin For Flat Long Shadows Generator - Dynamic Shadow Color

How to use it:

1. Include jQuery library and jQuery Flat Shadow plugin in the head section of your web page

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.flatshadow.js"></script>

2. The html

<div class="flat-icon"> A </div>

3. The sample CSS

.flat-icon {
text-align: center;
padding: 23px 28px;
font-weight: bold;
display: inline-block;
line-height: 100%;
overflow: hidden;
text-transform: uppercase;
margin-right: 15px;
width: 40px;
font-size: 50px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}

4. Call the plugin with options

<script>
$(document).ready(function(){
$(".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
});
});	
</script>

---

This awesome jQuery plugin is developed by peachananr. For more Advanced Usages, please check the demo page or visit the official website.