Recommended for pure CSS3 text effects

I have studied several text effects of pure css, CSS text striped shadow animation and responsive cream three-dimensional character effect. Today I will study several text effects, it mainly utilizes several unique features of the text-shadow and webkit Kernels to achieve the effect.

Click here for online research, and click here for download and favorites.

Effect 1-Effect

Our html file looks like this. In order to better demonstrate the effect, we have added the Editable attribute.

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

In the css file, Let's first look at the global settings

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 ;}

Then there is the exclusive CSS of effect 1, which is very simple. It is achieved by using text-shadow.

.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 2-long tail effect
The html file is still like that.

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

The text-shadow has a little more offset, and the color is gradually simplified, so the long tail effect is coming.

.effect02{  color:#333;  background-color: #ddd;  text-shadow:    1px -1px 0 #767676,     -1px 2px 1px #737272,     -2px 4px 1px #767474,     -3px 6px 1px #787777,     -4px 8px 1px #7b7a7a,     -5px 10px 1px #7f7d7d,     -6px 12px 1px #828181,     -7px 14px 1px #868585,     -8px 16px 1px #8b8a89,     -9px 18px 1px #8f8e8d,     -10px 20px 1px #949392,     -11px 22px 1px #999897,     -12px 24px 1px #9e9c9c,     -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 42px 1px #cbc9c8,     -22px 44px 1px #cfcdcd;}

Effect 3-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 4-twill stroke
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, only display the background on the text (-webkit-background-clip: text ;) text color transparency (-webkit-text-fill-color: transparent;) and text stroke (-webkit-text-stroke: 2px #111.

.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 5-text stripe Animation
Html file

<Div data-text = "front-end development whqet" class = "text javast05"> front-end development whqet </div>

Css file, use the: before pseudo object to display the stripe, and add an animation to it.

.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}      0% {background-position: -100% 100%}}; 

Effect 6-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 7-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 8-3D glare
Html file

<Div class = "text javast08"> 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, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------