小码哥-【代码画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