Home > Article > Web Front-end > CSS3 Tutorial-Text Effect
CSS3 provides many new technologies and advanced features in design. It has brought a revolutionary impact to Web front-end development. Many complex effects that previously required JavaScript can now be easily achieved using CSS3. This article introduces CSS3 tutorial-text effects to you, hoping to help improve your CSS skills.
CSS3 Text Effects:
CSS3 includes several new text features.
In this article, you will learn the following two text attributes:
1. text-shadow
text-shadow adds shadow to the text, using css3 attributes to add Texture of text without using any images.
Grammar:
text-shadow:h-shadowv-shadowblurcolor;
2. word-wrap
The word-wrap attribute of css is used to indicate whether the browser is allowed to segment sentences within a word. This is to prevent Overflow occurs when a string is too long and its natural period cannot be found. Allow long words to wrap to the next line:
Syntax:
p.test {word-wrap:break-word;}
Browser support:
Internet Explorer 10, Firefox, Chrome, Safari and Opera support the text-shadow attribute.
All major browsers support the word-wrap attribute.
Note: Internet Explorer 9 and earlier versions do not support the text-shadow attribute.
CSS3 text-shadow:
In CSS3, text-shadow applies a shadow to text.
You can specify the horizontal shadow, vertical shadow, blur distance, and the color of the shadow:
Example:
Add a shadow to a title :
h1 { text-shadow: 5px 5px 5px #FF0000; }
CSS3 automatic line wrapping:
If the word is too long, it may not exceed a certain area:
In CSS3, word The -wrap attribute allows you to allow text to force the text to wrap – even if it means splitting words:
Here is the CSS code:
Example :
Allows long words to be split and wrapped to the next line:
p {word-wrap:break-word;}
New text attributes:
That’s it CSS3 tutorial-text effect content, for more related content, please pay attention to the PHP Chinese website (www.php.cn)!