Pure CSS3 Text effect recommended

Previously studied a few pure CSS implementation of the text effect, "CSS text stripe Shadow animation" and "response cream three-dimensional effect," and so on, today we have to study several text effects, mainly using Text-shadow, WebKit the core of several unique features to achieve the effect.

Online Research click here to download Favorites Click here.

Effect 1-Stereo word effect

Our HTML file looks like this, and for a better display, we've added editable properties.

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

CSS file, let's look at the global settings first

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 is the effect of the exclusive CSS, very simple, is to use Text-shadow to achieve the effect of three-dimensional words

. effect01{    Background-color: #333;    Color: #fefefe;    Text-shadow:    0px 1px 0px #c0c0c0,    0px 2px 0px #b0b0b0,    0px 3px 0px #a0a0a0,    0px 4px 0px #909090,    0px 5px 10px rgba (0, 0, 0, 0.6);}

Effect two-long tail effect
The HTML file is still the same

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

Text-shadow inside offset a bit more, color gradually simple, long tail effect came.

. effect02{  Color: #333;  Background-color: #ddd;  Text-shadow:    1px-1px 0 #767676,     -1px 2px 1px #737272,     -2px 4px 1px #767474,     -3px 6px 1px #787777,     -4p X 8px 1px #7b7a7a,     -5px 10px 1px #7f7d7d,     -6px 12px 1px #828181,     -7px 14px 1px #868585,     -8px 16px 1px #8 B8a89,     -9px 18px 1px #8f8e8d,     -10px 20px 1px #949392,     -11px 22px 1px #999897,     -12px 24px 1px #9e9c9c, c16/>-13px 26px 1px #a3a1a1,     -14px 28px 1px #a8a6a6,     -15px 30px 1px #adabab,     -16px 32px 1px #b2b1b0,     - 17PX 34px 1px #b7b6b5,    -18px 36px 1px #bcbbba,     -19px 38px 1px #c1bfbf,     -20px 40px 1px #c6c4c4,     -21px 4 2px 1px #cbc9c8,     -22px 44px 1px #cfcdcd;}

Effect three-inner shadow
HTML file

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

CSS file

. effect03{  Color: #202020;  Background-color: #2d2d2d;  Text-shadow:     -1px-1px 1px #111111,    2px 2px 1px #363636;}

Effect four-twill stroke effect
HTML file

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

CSS file, use Linear-gradient to set the stripe background for the Div, display the background only on the text (-webkit-background-clip:text;), and the text color transparent (-webkit-text-fill-color: transparent;) and text strokes (-webkit-text-stroke:2px #111;) are implemented.

. effect04{  Background-color: #333;  Background-image:      linear-gradient (        45deg,        transparent 45%,        Hsla (48,20%,90%,1) 45%, Hsla        ( 48,20%,90%,1) 55%,        transparent 0        );    Background-size:. 05em. 05em;  -webkit-background-clip:text;  -webkit-text-fill-color:transparent;  -WEBKIT-TEXT-STROKE:2PX #111;}

Effect five-text stripe animation
HTML file

<div data-text= "front-end development Whqet" class= "text effect05" > Front-end development whqet</div>

CSS files, using: Before pseudo-objects to display stripes and animate them.

. effect05{    Color: #DC554F;    Background-color: #27ae60;    Z-index:3;}. effect05:before{    content:attr (data-text);      width:100%;    line-height:200px;    Opacity:. 5;    Position:absolute;    top:2px;    left:5px;    Background-image:        linear-gradient (          45deg,          transparent 45%,          Hsla (48,20%,90%,1) 45%,          Hsla (48,20%,90%,1) 55%,          transparent 0          );     z-index:-1;    Background-size:. 05em. 05em;      -webkit-background-clip:text;    -webkit-text-fill-color:transparent;     Animation:shadowgo 20s linear infinite; } @keyframes shadowgo{       0% {background-position:0 0}      

Effect six-stroke text
HTML file

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

CSS file

. effect06 {    -webkit-text-fill-color:transparent;    -webkit-text-stroke:2px #d6d6d6;    Background:url (http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg);    Background-size:cover;}

Effect seven-mask text
HTML file

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

CSS file

. effect07 {    background:url (http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg) #333;    -webkit-background-clip:text;    -webkit-text-fill-color:transparent;    Background-size:cover;    Animation:10s infinite linear animate;}. Effect07:before {    content: "";    width:100%;    height:100%;    Position:absolute;    left:0;    top:0;    Background-color: #999;    Z-index:-1;} @keyframes Animate {    0% {        background-position:0;    }    100% {        background-position:-1000px 0;    }}

Effect eight -3d glare effect
HTML file

<div class= "Text effect08" >  
CSS file
. effect08 {    color: #fff;    Transform-origin:center Bottom;    transform-style:preserve-3d;    Transition:all 1s;    Cursor:pointer;}. Effect08:hover {    Transform:rotate3d (1, 0, 0, 40deg);}. effect08 H1 {    position:absolute;    left:0;    right:0;    Margin:auto;    text-shadow:0 0 10px rgba (0, 0, 100,. 5);} @for $n from 1 to 8 {    . effect08 h1:nth-child (#{$n}) {        Transform:translatez (4px* $n);}    }
That ' s it.
----------------------------------------------------------
Front-end development Whqet, focus on web front-end development, share related resources, welcome to praise, welcome to shoot bricks.
---------------------------------------------------------------------------------------------------------