CSS3立體文字最佳實務

上一篇的《純CSS3文字效果推薦》文章裡面推薦了8款純css實現的文字效果，其中3d文字效果最為流行，限於篇幅僅僅展示了其3D實現原理，沒有考慮代碼的複用性和可移植性，今天來補充下，順便領略sass的強大功能，請大家摩摩拳擦擦掌，開工咯！

案例效果還是在codepen，線上研究點這裡，下載收藏點這裡。

1.單單純純的效果一

為了簡化操作，我們使用和上一篇文章《純CSS3文字效果推薦》一樣的文檔結構，後面的效果大差小不差，也就不再列出。

<div contenteditable="true" class="text effect01">前端開發whqet</div>  

css裡面還是首先來全域的設定，依然和上一篇文章大差小不差，不過為了避免視覺疲勞，我們修改了背景顏色和文字顏色。

body{    background-color: #666;  }  @import url(http://fonts.googleapis.com/css?family=Dosis:500,800);  .text {      font-family:"微軟雅黑", "Dosis", sans-serif;      font-size: 80px;      text-align: center;      font-weight: bold;      line-height:200px;      text-transform:uppercase;      position: relative;  }  

然後是簡單單純的效果一的核心代碼

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

從中我們可以看出，利用text-shadow實現立體效果的要素有三：

• 設定多個陰影實現縱深感，
• 陰影的水平和垂直位移變化實現方向感，
• 陰影的色彩坡形實現錯落感。

這種實現的方式雖說單純，但是可移植性不強、複用性差，試想一下，不同方向的立體字如何修改？不同顏色的立體字如何?？逐字實現不同效果腫麼辦？如果需要動畫又如何？

接下來，通過逐步完善“單純”的效果一，我們來一一解答這些疑問。

2.對“單純”說不的效果二，sass實現3d文字mixin

童鞋們就說了，哥，變化呢，好像跟前面那個沒區別呀？大家且耐心，看看代碼就明白了。

我用sass寫了一個text 3d的mixin，利用這個mixin我們可以輕鬆控制，立體字的縱深感、方向感、錯落感。

/*  對“單純”說不的效果二，  sass實現的華麗轉身  *//*** 利用text-shadow實現3d文字效果** $color     立體字的初始顏色* $dx        立體字水平位移位置，dx>0,向右偏，建議取值[-2,2]* $dy        立體字垂直位移位置，dy>0,向下偏，建議取值[-2,2]，dx和dy配合控制立體字的方向* $steps     立體字的層疊數量* $darken    立體字的顏色變暗數值，建議取值[0,1],需要結合層疊數量，避免過多的黑色出現* @copyright 前端開發whqet，http://blog.csdn.net/whqet */@mixin text3d($color: #ffd300, $dx: 1, $dy: -1,$steps:10, $darken:.1) {  color:$color;  $color:darken($color,30%);  $output: '';  $x:0px;  $y:0px;  @for $n from 1 to $steps{    $output: $output + '#{$x} #{$y} 0 #{$color},';    $x:$x+$dx;    $y:$y+$dy;    $color:darken($color, $darken * ($n+10));  }  $output: $output+'#{$x} #{$y} 12px rgba(0,0,0,0.3),#{$x} #{$y} 1px rgba(0,0,0,0.5);';    text-shadow:unquote($output);}.effect02{    @include text3d(#00d3ff,1,-1,15,.05);}

腫麼樣，大家仔細研究啦，利用sass實現的這個mixin，我們可以非常簡單的實現立體字，並且可以搞起來動畫，請看效果三。

3.“多動”的效果三，animation讓陰影動起來

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

/*  “多動”效果三， 加上動畫 */.effect03{  animation:animateShadow 2s linear infinite; }@keyframes animateShadow{    0% {@include text3d(#00d3ff,1,1,15,.05); }  25% {@include text3d(#00d3ff,-1,-1,15,.05); }  50% {@include text3d(#00d3ff,1,1,15,.05); }  75% {@include text3d(#00d3ff,-1.5,1.5,15,.05); }}

4. 彰顯“個性”的效果四，lettering.js實現逐字控制
lettering.js是一個功能強大的jquery外掛程式，可以把字串拆分，類似於下面代碼所示。

<div contenteditable="true" class="text effect04">前端開發whqet</div><!-- 拆分成這樣 --><div contenteditable="true" class="text effect04"><span class="char1">前</span><span class="char2">端</span><span class="char3">開</span><span class="char4">發</span><span class="char5">w</span><span class="char6">h</span><span class="char7">q</span><span class="char8">e</span><span class="char9">t</span></div>

我們需要在頁面裡匯入jquery.js和lettering.js，然後，我們就可以使用了。

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

然後，利用sass實現個人化控制，adjust-hue產生連續色相的顏色，@for迴圈實現遍曆。

/*   彰顯“個性”的效果四，lettering.js實現逐字控制 */.effect04{  letter-spacing:.1em;}$base:#FFD300;@for $i from 1 through 9 {  .effect04 .char#{$i} {     @include text3d(adjust-hue($base, $i *15deg),-1,1,10,.05)  }}

5. “個性”升級的效果五，彩虹字動畫

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

6.text-shadow IE9-的解決方案當然，不幸的是直到IE10，text-shadow才得到了比較完善的支援，那麼IE9-怎麼辦呢，尤其是在xp的狂熱愛好的中國。所幸IE內建的濾鏡可以達到一樣的效果，所以就有了這個text-shadow polyfill，我們這裡使用sass的方式來補丁text-shadow.這樣的話針對ie9以下的瀏覽器，我們的text3d mixin要這樣修改

/*** 利用text-shadow實現3d文字效果** $color     立體字的初始顏色* $dx        立體字水平位移位置，dx>0,向右偏，建議取值[-2,2]* $dy        立體字垂直位移位置，dy>0,向下偏，建議取值[-2,2]，dx和dy配合控制立體字的方向* $steps     立體字的層疊數量* $darken    立體字的顏色變暗數值，建議取值[0,1],需要結合層疊數量，避免過多的黑色出現* @copyright 前端開發whqet，http://blog.csdn.net/whqet */@mixin text3d($color: #ffd300, $dx: 1, $dy: -1,$steps:10, $darken:.1) {  color:$color;  $color:darken($color,30%);  $output: '';  $x:0px;  $y:0px;  @for $n from 1 to $steps{    $output: $output + '#{$x} #{$y} 0 #{$color},';    $x:$x+$dx;    $y:$y+$dy;    $color:darken($color, $darken * ($n+10));  }  $output: $output+'#{$x} #{$y} 12px rgba(0,0,0,0.3),#{$x} #{$y} 1px rgba(0,0,0,0.5);';    //for the mordern browser  //text-shadow:unquote($output);    //just for ie9-，這裡做了修改  @include jquery-text-shadow(unquote($output));}

Enjoy it.

案例效果還是在codepen，線上研究點這裡，下載收藏點這裡。

----------------------------------------------------------

前端開發whqet，關注web前端開發，分享相關資源，歡迎點贊，歡迎拍磚。
---------------------------------------------------------------------------------------------------------