CSS3 Tutorial-Text effects

CSS3 offers a number of new and advanced design features that have revolutionized web front-end development, many of the complexities that require JavaScript to achieve, and are now easy to implement with CSS3. This article introduces you to the CSS3 tutorial-text effect, hoping to help improve your CSS skills.

CSS3 Text effects:

The CSS3 contains several new text attributes.

In this article, you will learn the following two text attributes:

1, Text-shadow

Text-shadow adds shading to text and uses the CSS3 property to add texture to the text without using any images.

Grammar:

Text-shadow:h-shadowv-shadowblurcolor;

2, Word-wrap

The Word-wrap property of CSS is used to indicate whether a browser is allowed to segment within a word, which is to prevent overflow when a string is too long and cannot find its natural segmentation point. Allow long words to wrap to the next line:

Grammar:

p.test {Word-wrap:break-word;}

Browser support:

Internet Explorer 10, Firefox, Chrome, Safari, and Opera support the Text-shadow property.

All major browsers support the Word-wrap property.

Note: Internet Explorer 9 and earlier versions do not support the Text-shadow property.

CSS3 Text Shadow:

In CSS3, Text-shadow can apply a shadow to text.

You can specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

Instance:

Add a shadow to the title:

h1{text-shadow:5px 5px 5px #FF0000;}

CSS3 Line Wrapping:

If the word is too long, you may not be able to go beyond an area:

In CSS3, the Word-wrap property allows you to allow text to force text to wrap-even if that means splitting the word:

Here is the CSS code:

Instance:

Allows splitting of long words and wrapping to the next line:

p {Word-wrap:break-word;}

New Text properties:

The above is CSS3 Tutorial-text effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

