Flat Shadow 扁平化投影特效 jQuery 插件

Question

说来也奇怪，我们现在基本都是扁平化设计，但是我们又要求文字或者图标看起来又一点立体效果，比如给图标添加一个投影，今天给大家介绍一个小的 jQuery 插件，为您的扁平 UI 元素蒙上了一层创建深度的阴影，这是时下流行的效果。

使用方法

使用方法也非常的简单，首先你需要引入最新版本的jQuery插件，然后将插件文件也一起引入到你的页面中：

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

然后编写类似下面的HTML代码：

<div class="flat-icon"> FLAT </div>
<div class="flat-icon"> UI </div>

最后再调用插件，传递一些参数：

$(".flat-icon").flatshadow({
  color: "#2ecc71", // 元素里面的背景颜色，如果没有设置，将会随机选择一个颜色。
  angle: "SE", // 投影的方向，可选的参数：N, NE, E, SE, S, SW, W 和 NW，如果没有设置这个参数，投影的方向将从前面的这些里面随机选择一个
  fade: true, // 阴影是否渐变，正常情况下是这样的，距离越远，阴影就越模糊。
  boxShadow: "#d7cfb9" // 阴影的颜色
});

定制效果

如果你不想统一的给每个元素设置相同的投影，总有些特别的图标或者问题，那么你可以使用 HTML5 中的 data-* 属性，单独给每个图标设置不同的阴影效果，例如不同的方向，不同的背景颜色，不同的投影颜色等。

<div data-color="#2ecc71" data-angle="NE" class="flat-icon"> FLAT </div>
<div data-color="#1ABC9C" data-angle="NW" class="flat-icon"> UI </div>

不过最后还是要调用插件实例化，只是少了上面的一些参数：

$(".flat-icon").flatshadow({
  fade: true,
  boxShadow: "#d7cfb9"
});

相关连接

• 项目地址：http://www.thepetedesign.com/demos/jquery_flat_shadow_demo.html
• Github地址：https://github.com/peachananr/flat-shadow