Flat Shadow 扁平化投影特效 jQuery 插件 - 资源分享

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

发布于 2017-08-25 字数 2188 浏览 2579 评论 0

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

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

使用方法

使用方法也非常的简单,首先你需要引入最新版本的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"
});

相关连接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论