jQuery Plugin For Flat UI Elements With Long Shadows - Flat Shadow
File Size: | 5.44KB |
---|---|
Views Total: | 2021 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.