CSS3 text effect
CSS3 text effect
Several new text features are included in CSS3.
In this chapter, you will learn about the following text properties:
Text-shadow
Box-shadow
Text-overflow
Word-wrap
Word-break
Browser support
Attribute |
|||||
|---|---|---|---|---|---|
Text-shadow |
4.0 |
10.0 |
3.5 |
4.0 |
9.5 |
Box-shadow |
10.04.0-webkit- |
9.0 |
4.03.5-moz- |
5.1 3.1-webkit- |
10.5 |
Text-overflow |
4.0 |
6.0 |
7.0 |
3.1 |
11.09.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 of CSS3
In CSS3 text-shadow property applies to text shadows.
You specified horizontal shadows, vertical shadows, blurred distances, and the color of shadows:
Example
Add shadows to the title:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
CSS3 box-shadow attribute
CSS3 in CSS3 box-shadow property applies to box shadows
Example
div {
box-shadow: 10px 10px 5px #888888;
}
Next, add color to the shadow.
Example:
div {
box-shadow: 10px 10px grey;
}
Next, add a blur effect to the shadow
Example
div {
box-shadow: 10px 10px 5px grey;
}
You can also add shadow effects to:: before and:: after pseudo elements
Example
#boxshadow {
position: relative;
b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
pa dding: 10px;
bac kground: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}
A special case for the use of shadows is the card effect
Example
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
CSS3 Text Overflow attribute
The CSS3 text overflow property specifies how the overflow content should bedisplayed to the user
Example
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
Line feeds of CSS3
If a word is too long to fit in an area, it extends to the outside:
In CSS3, the auto-wrap attribute allows you to force text wrapping-even if it means splitting a word in the middle of it:
The CSS code is as follows:
Example
Allow long text to wrap:
p{word-wrap:break-word;}
CSS3 word splitting and newline
The CSS3 word split newline property specifies the newline rule:
The CSS code is as follows:
Example
p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}
New text Properties
Attribute |
Description |
CSS |
|---|---|---|
Hanging-punctuation |
Specifies 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 the line immediately before the forced newline character. |
3 |
Text-emphasis |
Applies the accent tag and the foreground color of the accent tag to the element’s text. |
3 |
Text-justify |
Specifies the alignment method to be used when text-align is set to justify. |
3 |
Text-outline |
Specifies the outline of the text. |
3 |
Text-overflow |
Specifies what happens when a text overflow contains an element. |
3 |
Text-shadow |
Add shadows to the text. |
3 |
Text-wrap |
Specifies the line wrapping rules for the text. |
3 |
Word-break |
Stipulate the line wrapping rules for non-Chinese, Japanese and Korean texts. |
3 |
Word-wrap |
Allows you to split long, indivisible words and wrap them to the next line. |
3 |