CSS3立体文字

1.单单纯纯的效果一

为了简化操作，我们使用和上一篇文章《纯CSS3文字效果推荐》一样的文档结构，后面的效果大差小不差，也就不再列出。

[html]  view plain copy

1. <div contenteditable="true" class="text effect01">前端开发whqet</div>    

css里面还是首先来全局的设置，依然和上一篇文章大差小不差，不过为了避免视觉疲劳，我们修改了背景颜色和文字颜色。

[css]  view plain copy

1. body{    
2.   background-color: #666;    
3. }    
4. @import url(http://fonts.googleapis.com/css?family=Dosis:500,800);    
5. .text {    
6.     font-family:"微软雅黑", "Dosis", sans-serif;    
7.     font-size: 80px;    
8.     text-align: center;    
9.     font-weight: bold;    
10.     line-height:200px;    
11.     text-transform:uppercase;    
12.     position: relative;    
13. }    

然后是简单单纯的效果一的核心代码

[css]  view plain copy

1. /*简单单纯的效果一*/  
2. .effect01{  
3.     background-color: #7ABCFF;  
4.     color:#FFD300;  
5.     text-shadow:  
6.         0px 0px 0 #b89800,   
7.         1px -1px 0 #b39400,   
8.         2px -2px 0 #ad8f00,   
9.         3px -3px 0 #a88b00,   
10.         4px -4px 0 #a38700,   
11.         5px -5px 0 #9e8300,   
12.         6px -6px 0 #997f00,   
13.         7px -7px 0 #947a00,   
14.         8px -8px 0 #8f7600,   
15.         9px -9px 0 #8a7200,   
16.         10px -10px 0 #856e00,   
17.         11px -11px 0 #806a00,   
18.         12px -12px 0 #7a6500,   
19.         13px -13px 12px rgba(0, 0, 0, 0.55),   
20.         13px -13px 1px rgba(0, 0, 0, 0.5);  
21. }  

从中我们可以看出，利用text-shadow实现立体效果的要素有三：

• 设置多个阴影实现纵深感，
• 阴影的水平和垂直偏移变化实现方向感，
• 阴影的颜色渐变实现错落感。

这种实现的方式虽说单纯，但是可移植性不强、复用性差，试想一下，不同方向的立体字如何修改？不同颜色的立体字如何实现？逐字实现不同效果肿么办？如果需要动画又如何？

接下来，通过逐步完善“单纯”的效果一，我们来一一解答这些疑问。

2.对“单纯”说不的效果二，sass实现3d文字mixin

童鞋们就说了，哥，变化呢，好像跟前面那个没区别呀？大家且耐心，看看代码就明白了。

我用sass写了一个text 3d的mixin，利用这个mixin我们可以轻松控制，立体字的纵深感、方向感、错落感。

[css]  view plain copy

1. /*  对“单纯”说不的效果二，  sass实现的华丽转身  */  
2.   
3. /** 
4. * 利用text-shadow实现3d文字效果 
5. * 
6. * $color     立体字的初始颜色 
7. * $dx        立体字水平偏移位置，dx>0,向右偏，建议取值[-2,2] 
8. * $dy        立体字垂直偏移位置，dy>0,向下偏，建议取值[-2,2]，dx和dy配合控制立体字的方向 
9. * $steps     立体字的层叠数量 
10. * $darken    立体字的颜色变暗数值，建议取值[0,1],需要结合层叠数量，避免过多的黑色出现 
11. * @copyright 前端开发whqet，http://blog.csdn.net/whqet  
12. */  
13. @mixin text3d($color: #ffd300, $dx: 1, $dy: -1,$steps:10, $darken:.1) {  
14.   color:$color;  
15.   $color:darken($color,30%);  
16.   
17.   $output: '';  
18.   $x:0px;  
19.   $y:0px;  
20.   @for $n from 1 to $steps{  
21.     $output: $output + '#{$x} #{$y} 0 #{$color},';  
22.     $x:$x+$dx;  
23.     $y:$y+$dy;  
24.     $color:darken($color, $darken * ($n+10));  
25.   }  
26.   $output: $output+'#{$x} #{$y} 12px rgba(0,0,0,0.3),#{$x} #{$y} 1px rgba(0,0,0,0.5);';  
27.     
28.   text-shadow:unquote($output);  
29. }  
30.   
31. .effect02{  
32.     @include text3d(#00d3ff,1,-1,15,.05);  
33. }  

肿么样，大家仔细研究啦，利用sass实现的这个mixin，我们可以非常简单的实现立体字，并且可以搞起来动画，请看效果三。

3.“多动”的效果三，animation让阴影动起来

有了效果二中的mixin，效果三就自然而然了。

[css]  view plain copy

1. /*  “多动”效果三， 加上动画 */  
2. .effect03{  
3.   animation:animateShadow 2s linear infinite;   
4. }  
5. @keyframes animateShadow{    
6.   0% {@include text3d(#00d3ff,1,1,15,.05); }  
7.   25% {@include text3d(#00d3ff,-1,-1,15,.05); }  
8.   50% {@include text3d(#00d3ff,1,1,15,.05); }  
9.   75% {@include text3d(#00d3ff,-1.5,1.5,15,.05); }  
10. }  

4. 彰显“个性”的效果四，lettering.js实现逐字控制

lettering.js是一个功能强大的jquery插件，可以把字符串拆分，类似于下面代码所示。

[html]  view plain copy

1. <div contenteditable="true" class="text effect04">前端开发whqet</div>  
2. <!-- 拆分成这样 -->  
3. <div contenteditable="true" class="text effect04">  
4.     <span class="char1">前</span>  
5.     <span class="char2">端</span>  
6.     <span class="char3">开</span>  
7.     <span class="char4">发</span>  
8.     <span class="char5">w</span>  
9.     <span class="char6">h</span>  
10.     <span class="char7">q</span>  
11.     <span class="char8">e</span>  
12.     <span class="char9">t</span>  
13. </div>  

我们需要在页面里导入jquery.js和lettering.js，然后，我们就可以使用了。

[html]  view plain copy

1. <!-- 引入jquery，cdn方式 -->  
2. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
3. <!-- 引入lettering，cdn方式 -->  
4. <script src="//cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>  
5. <!-- 使用lettering -->  
6. <script>  
7.     //JS is only used to keep the HTML markup clean  
8.     $(".effect04").lettering();  
9. </script>  

然后，利用sass实现个性化控制， adjust-hue生成连续色相的颜色，@for循环实现遍历。

[css]  view plain copy

1. /*   彰显“个性”的效果四，lettering.js实现逐字控制 */  
2. .effect04{  
3.   letter-spacing:.1em;  
4. }  
5. $base:#FFD300;  
6. @for $i from 1 through 9 {  
7.   .effect04 .char#{$i} {   
8.     @include text3d(adjust-hue($base, $i *15deg),-1,1,10,.05)  
9.   }  
10. }  

5. “个性”升级的效果五，彩虹字动画

[css]  view plain copy

1. /*   “个性”升级的效果五，彩虹字 */  
2. @for $i from 1 through 10 {  
3.   .effect05 .char#{$i} {   
4.     animation: rainbow 2s linear infinite;  
5.     animation-delay: 0.1s * $i;  
6.   }  
7. }  
8. $base2:#7E00FF;  
9. @keyframes rainbow {  
10.   @for $i from 0 through 10 {  
11.     #{$i* 10%}  {@include text3d(adjust-hue($base2, $i *36deg), 1, 1, 10,.1); }  
12.   }  
13. }  

6.text-shadow IE9-的解决方案

当然，不幸的是直到IE10，text-shadow才得到了比较完善的支持，那么IE9-怎么办呢，尤其是在xp的狂热爱好的中国。所幸IE自带的滤镜可以达到一样的效果，所以就有了这个text-shadow polyfill，我们这里使用sass的方式来补丁text-shadow.

这样的话针对ie9以下的浏览器，我们的text3d mixin要这样修改

[css]  view plain copy

1. /** 
2. * 利用text-shadow实现3d文字效果 
3. * 
4. * $color     立体字的初始颜色 
5. * $dx        立体字水平偏移位置，dx>0,向右偏，建议取值[-2,2] 
6. * $dy        立体字垂直偏移位置，dy>0,向下偏，建议取值[-2,2]，dx和dy配合控制立体字的方向 
7. * $steps     立体字的层叠数量 
8. * $darken    立体字的颜色变暗数值，建议取值[0,1],需要结合层叠数量，避免过多的黑色出现 
9. * @copyright 前端开发whqet，http://blog.csdn.net/whqet  
10. */  
11. @mixin text3d($color: #ffd300, $dx: 1, $dy: -1,$steps:10, $darken:.1) {  
12.   color:$color;  
13.   $color:darken($color,30%);  
14.   
15.   $output: '';  
16.   $x:0px;  
17.   $y:0px;  
18.   @for $n from 1 to $steps{  
19.     $output: $output + '#{$x} #{$y} 0 #{$color},';  
20.     $x:$x+$dx;  
21.     $y:$y+$dy;  
22.     $color:darken($color, $darken * ($n+10));  
23.   }  
24.   $output: $output+'#{$x} #{$y} 12px rgba(0,0,0,0.3),#{$x} #{$y} 1px rgba(0,0,0,0.5);';  
25.     
26.   //for the mordern browser  
27.   //text-shadow:unquote($output);  
28.     
29.   //just for ie9-，这里做了修改  
30.   @include jquery-text-shadow(unquote($output));  
31. }