CSS stereo text effects best practices

On a "pure CSS3 text effect Recommendation" in the article recommended 8 pure CSS Implementation of the text effect, which 3d text effect is most popular, confined to the space only to show its 3D implementation principle, no consideration of code reusability and portability, today to add, by the way to appreciate the powerful features of SASS, Please everyone Momo fist wipe palm, start!

The case effect is still in codepen, online research point here, download the collection point here.

1. Pure effect alone

In order to simplify the operation, we use the same document structure as the previous article "pure CSS3 Text Effect Recommendation", the effect of the latter is not bad, it is no longer listed.

<div contenteditable= "true" class= "text effect01" > Front-end development whqet</div>  

CSS inside or the first to the global setting, and the previous article is not bad, but in order to avoid visual fatigue, we modified the background color and text color.

body{    background-color: #666;  }  @import URL (http://fonts.googleapis.com/css?family=Dosis:500,800);  . Text {      font-family: "Microsoft Jas Black", "dosis", Sans-serif;      font-size:80px;      Text-align:center;      Font-weight:bold;      line-height:200px;      Text-transform:uppercase;      position:relative;  }  

Then there is the core code of the simple effect one

/* Simple effect one */.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);}

As we can see, there are three elements that use Text-shadow to achieve three-dimensional effects:

• Set multiple shadows to achieve a sense of depth,
• The horizontal and vertical offset of the shadow changes to achieve a sense of direction,
• The color gradient of the shadow realizes a sense of scattered.

This way of realization is simple, but portability is not strong, reusability is poor, imagine how to change the three-dimensional word in different directions? How do the three-dimensional characters of different colors be implemented? Is it possible to achieve different effects by word-verbatim? What if I need an animation?

Next, by gradually perfecting the "pure" effect one, we will answer these questions.

2. The effect of "simple" to say no two, sass implementation of 3d text mixin

Children's shoes said, elder brother, change, as if with the front that no difference? Everyone and patience, look at the code to understand.

I used sass to write a text 3d mixin, using this mixin we can easily control, three-dimensional character depth, direction, sense of scattered.

/*  for "simple" say no effect two,  sass implementation of the gorgeous turn  *//*** use Text-shadow to achieve 3d text effect * * $color     The initial color of the three-dimensional word * $dx        three-dimensional word horizontal offset position, DX >0, to the right, the proposed value [ -2,2]* $dy        vertical offset position, dy>0, downward bias, recommended value [ -2,2],dx and dy with control of the direction of the three-dimensional word * $steps     the number of stack of three-dimensional words * $darken    Three-dimensional word color dimming value, recommended value [0,1], need to combine the number of stacks, avoid excessive black appearance * @copyright front-end Development Whqet,http://blog.csdn.net/whqet */@mixin Text3d ($color: # ffd300, $DX: 1, $dy:-1, $steps: Ten, $darken:. 1) {  color: $color;  $color:d Arken ($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:d Arken ($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);}

Swollen, we study carefully, using SASS realization of this mixin, we can very simple implementation of three-dimensional words, and can make up animation, see effect three.

3. "Multi-action" effect three, animation let the shadow move.

With the effect of the two mixin, the effect of the third is natural.

/*  "multi-action" effect three, plus animation */.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. Show "personality" effect four, lettering.js achieve verbatim control
Lettering.js is a powerful jquery plugin that splits strings, similar to the one shown in the following code.

<div contenteditable= "true" class= "text effect04" > Front-end development whqet</div><!--split into such--><div Contenteditable= "true" class= "text effect04" ><span class= "char1" > Pre </span><span class= "Char2" > End </span><span class= "Char3" > Open </span><span class= "CHAR4" > Send </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>

We need to import jquery.js and lettering.js on the page, and then we can use it.

<!--introduced JQUERY,CDN mode--><script src= "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" >< /script><!--introduced LETTERING,CDN mode--><script src= "//CDNJS.CLOUDFLARE.COM/AJAX/LIBS/LETTERING.JS/0.6.1/ Jquery.lettering.min.js "></script><!--using lettering--><script>//js are only used to keep the HTML Markup clean$ (". effect04"). Lettering ();</script>

Then, using SASS to achieve personalized control, Adjust-hue generate the color of the continuous hue, @for loop to implement the traversal.

/*   Highlight the "personality" effect four, lettering.js achieve verbatim control */.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. The effect of "personality" upgrade five, rainbow character animation

/*   "personality" upgrade effect five, Rainbow Word */@for $i from 1 through {  . effect05 char#{$i} {     animation:rainbow 2s linear infinite;< C3/>animation-delay:0.1s * $i;  }} $base 2: #7E00FF, @keyframes Rainbow {  @for $i from 0 through {    #{$i * 10%}  {@include Text3d (Adjust-hue ($ Base2, $i *36deg), 1, 1, 10,.1); }  }}

Enjoy it.

The case effect is still in codepen, online research point here, download the collection point here.

6.text-shadow ie9-Solutionsof course, unfortunately, until Ie10,text-shadow to get a more complete support, then ie9-how to do it, especially in XP's fanatical hobby of China. Fortunately, ie comes with the filter can achieve the same effect, so there is this Text-shadow polyfill, we use the sass way to patch Text-shadow.Wait a minute, brother is my dissertation ...

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

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