Pure CSS3 Text effect recommended

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.