CSS3 text effect
May 04, 2021 CSS3
Table of contents
7.. Next, add a blur effect to the shadow
9.. You can also add a shadow effect to the ::before and ::after pseudo-elements
13.. CSS3 Text Overflow properties
CSS3 text effect
CSS3 text effect
CSS3 contains several new text features.
In this section, you'll learn about the following text properties:
-
text-shadow
-
box-shadow
-
text-overflow
-
word-wrap
-
word-break
Browser support
| Attributes | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow |
10.0
4.0 -webkit- |
9.0 |
4.0
3.5 -moz- |
5.1
3.1 -webkit- |
10.5 |
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 |
11.0
9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
Text shadow for CSS3
In CSS3, the text-shadow property applies to text shadows.
You specify horizontal shadows, vertical shadows, blurred distances, and the color of shadows:
CSS3 box-shadow property
The CSS3 box-shadow property in CSS3 applies to box shadows
Next, color the shadows
Next, add a blur effect to the shadow
You can also add a shadow effect to the ::before and ::after pseudo-elements
Try it out . . .
A shadow is a special case of a card.
Text cards . . . Try it out . . .
CSS3 Text Overflow properties
The CSS3 text overflow property specifies how the overflow content should be displayed to the user
Try it out . . .
Line-up for CSS3
If a word is too long to fit in an area, it extends to the outside:
In CSS3, the line break property allows you to force text to break - even if that means splitting a word in the middle of it:
The CSS code is as follows:
The CSS3 word splits the line break
The CSS3 word split line break property specifies a line break rule:
The CSS code is as follows:
New Text Properties
| Property | Describe | Css |
|---|---|---|
| hanging-punctuation | Specify whether the punctuation character is outside the wireframe. | 3 |
| punctuation-trim | Specifies whether punctuation characters are trimmed. | 3 |
| text-align-last | Sets how to align the last line or line immediately before the forced line break. | 3 |
| text-emphasis | Apply a focus marker and the fore forech color of the focus marker to the text of the element. | 3 |
| text-justify | Specifies the alignment method used when text-align is set to "justify". | 3 |
| text-outline | Specify the outline of the text. | 3 |
| text-overflow | Specifies what happens when text overflows to contain elements. | 3 |
| text-shadow | Add a shadow to the text. | 3 |
| text-wrap | Provides new line-by-line rules for text. | 3 |
| word-break | Provides line-changing rules for non-Chinese, Japanese and Korean texts. | 3 |
| word-wrap | Allows long, indivisible words to be split and lined to the next line. | 3 |