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

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

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

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

下面是实现效果：

长投影效果.jpg

下面我们直接上代码：

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

 
                   <
                   style
                   >
                  
                   body{ font-size: 24px; font-family: '微软雅黑'; font-weight: bold; color: #fff; }
                  
                   ul,li{ padding: 0; margin: 0; }
                  
                   ul{ position: absolute; left: 50%; top: 50px; margin-left: -300px; }
                  
                   li{ list-style: none; float: left; width: 100px; height: 100px; border-radius: 50%; background: pink; margin: 50px; text-align: center; line-height: 100px; overflow: hidden; }
                  
                   </
                   style
                   >
                  
                   <
                   body
                   >
                  
                   <
                   ul
                   >
                  
                   <
                   li
                   >网页</
                   li
                   >
                  
                   <
                   li
                   >UI</
                   li
                   >
                  
                   <
                   li
                   >学院</
                   li
                   >
                  
                   </
                   ul
                   >
                  
                   </
                   body
                   >

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

1 2	`<` `script` `src` `=` `"jquery-1.7.2.min.js"` `></` `script` `>` `<` `script` `src` `=` `"jquery.flatshadow.min.js"` `></` `script` `>`

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

 
                   <!DOCTYPE html>
                  
                   <
                   html
                   >
                  
                   <
                   head
                   >
                  
                   <
                   meta 
                   charset
                   =
                   "UTF-8"
                   >
                  
                   <
                   title
                   >Document</
                   title
                   >
                  
                   <
                   style
                   >
                  
                   body{ font-size: 24px; font-family: '微软雅黑'; font-weight: bold; color: #fff; }
                  
                   ul,li{ padding: 0; margin: 0; }
                  
                   ul{ position: absolute; left: 50%; top: 50px; margin-left: -300px; }
                  
                   li{ list-style: none; float: left; width: 100px; height: 100px; border-radius: 50%; background: pink; margin: 50px; text-align: center; line-height: 100px; overflow: hidden; }
                  
                   </
                   style
                   >
                  
                   </
                   head
                   >
                  
                   <
                   body
                   >
                  
                   <
                   ul
                   >
                  
                   <
                   li 
                   class
                   =
                   "flat-icon"
                   >网页</
                   li
                   >
                  
                   <
                   li 
                   class
                   =
                   "flat-icon"
                   >UI</
                   li
                   >
                  
                   <
                   li 
                   class
                   =
                   "flat-icon"
                   >学院</
                   li
                   >
                  
                   </
                   ul
                   >
                  
                   <
                   script 
                   src
                   =
                   "jquery-1.7.2.min.js"
                   ></
                   script
                   >
                  
                   <
                   script 
                   src
                   =
                   "jquery.flatshadow.min.js"
                   ></
                   script
                   >
                  
                   <
                   script
                   >
                  
                   $(function(){
                  
                   $(".flat-icon").flatshadow({
                  
                   color: "#ccc",  //选中元素的背景颜色；如果没有指定将会随机；
                  
                   angle: "SE",     //投影方向参数，可选值：N, NE, E, SE, S, SW, W and NW，如果没有指定则随机；
                  
                   fade: true,     //渐变投影效果，true为渐变，false为实色效果；
                  
                   boxShadow: "blue" // 盒子的投影颜色，（作用不大）；
                  
                   });
                  
                   });
                  
                   </
                   script
                   >
                  
                   </
                   body
                   >
                  
                   </
                   html
                   >

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

参数注释：

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

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

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

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

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

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

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