CSS3 Best Practices for stereo text

Front-end development whqet,csdn, Wang Haiqing, Whqet, front-end development experts

On a "pure CSS3 text effect Recommendation" in the article recommended 8 pure CSS Implementation of the text effect, in which 3d text effect is most popular, confined to the space only show its 3D implementation principle, not consider the code reusability and portability. Today to Add. By the way to appreciate the powerful features of SASS, please Momo fist wipe the palm. It's starting!

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

1. Pure effect alone

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvd2hxzxq=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70 /gravity/southeast "/>

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 very poor. It is no longer listed.

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

CSS inside or first to the global setting, and the previous article on the big difference small, just to avoid visual fatigue, we changed 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);}

From this we can see that the three elements of using Text-shadow to achieve three-dimensional effect:

• 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, reuse is poor, imagine, how to change the three-dimensional word in different directions? How to achieve the three-dimensional characters of different colors? Is it possible to achieve different effects by word-verbatim? What if you need an animation?

Next, by gradually intact "pure" effect one. Let's 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 it, like the front that no difference? Everyone and patience. Look at the code and make it clear.

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

/*  for "simple" said 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 the        horizontal offset position. Dx>0, to the right, the recommended value [ -2,2]* $dy the        vertical offset position of the stereo word. Dy>0, downward bias. recommended values [ -2,2],dx and dy mate control the direction of the stereo word * $steps     the number of stacked words * $darken    The color of the three-dimensional word dimmed values. Recommended value [0,1], need to combine the number of stacks, to 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 like. We study carefully, using SASS realization of this mixin, we can very easy to achieve 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 three 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

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvd2hxzxq=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70 /gravity/southeast "/>
Lettering.js is a powerful jquery plugin capable of splitting strings. Similar to what is seen 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'll be able to 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

/* The   effect of the "personality" upgrade is five. Rainbow Word */@for $i from 1 through {  . effect05. char#{$i} {     animation:rainbow 2s linear infinite;    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); }  }}

The solution of 6.text-shadow ie9-Of course. Unfortunately, it was not until IE10. Text-shadow to get a better support, then ie9-how to do it, especially in XP's fanatical hobby of China.

Fortunately, ie comes with filters to achieve the same effect. So with this Text-shadow polyfill, we use the SASS approach to patch Text-shadow here. This kind of words for IE9 below the browser, our Text3d mixin to change this

/*** implement 3d with Text-shadow Word effect * * $color the initial color of a solid word * $dx the horizontal offset position of the stereo word. Dx>0, right-leaning. Recommended value [ -2,2]* $dy vertical offset position, dy>0, downward bias, recommended value [ -2,2]. DX and dy mates control the direction of the three-dimensional word * $steps the stacking number of three-dimensional words * $darken the color of the three-dimensional word dimmed values, 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: 10, $  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);    For the Mordern browser//text-shadow:unquote ($output); Just for ie9-, changed here @include Jquery-text-shadow (unquote ($output));} 

Enjoy it.

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

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

Front-end development whqet. Focus on web front-end development, share related resources, welcome to praise, welcome to shoot bricks.
---------------------------------------------------------------------------------------------------------

CSS3 Best Practices for stereo text