您的位置：首页 > 编程语言

小码哥-【代码画ICON】用代码实现设计中的长投影效果

2016-11-25 15:33 183 查看

做设计的同学应该都知道，画ICON的时候经常需要处理长投影效果，可以自己画，也可以使用ps插件，但都需要用到photoshop软件。

这种长投影效果，除了可以通过ps来实现，在代码中也是可以实现，而且处理方式简单，所以我们也可以通过代码来画出不同的UI图标。

代码中的长投影效果，利用的是一个jQuery插件，它是基于jQuery的一个库文件，所以使用起来比较简单，插件的作者是国外的一位工程师，我只是个搬运工。

下面是实现效果：

下面我们直接上代码：

首先准备基本的结构和样式；

因为是基于jQuery的插件，所以在用的时候除了要引入要用的插件文件，还需要引入jQuery文件，否则用不了；

两个文件引入后，就可以通过js使用了；通过jQuery选中需要添加投影效果的标签即可，通过flatshadow方法来设置相关参数；以下是实现效果的完整代码：

插件的原理主要是给标签添加了文字投影属性text-shadow而已，所以有耐心的时候也可以自己书写，只不过重复性的工作还是交给计算机吧。

参数注释：

        color ，设置背景颜色，不指定会生成随机颜色；

        angle ，投影方向，也就是投影角度，N 表示上，NE表示右上，E表示右，SE表示右下，S表示下，SW表示左下，W表示左，NW表示左上；

        fade ，渐变投影效果，true为渐变，false为实色效果；

        boxShadow ，选中标签外围盒子的投影颜色，用处不大；

所有参数都是可选参数，如果不指定则随机。

附件是demo文件和插件文件。

代码实现长投影效果插件.zip

来源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2858&extra=page%3D3

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： UI 小码哥小码哥教育

相关文章推荐

新的分享

章节导航