CSS3 Text Effects
CSS3 Text Effects
CSS3 includes several new text features.
In this chapter, you will learn about the following text properties:
- text-shadow
- box-shadow
- text-overflow
- word-wrap
- word-break
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| 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 |
CSS3 Text Shadows
In CSS3, the text-shadow property applies text shadows.
You specify the horizontal shadow, vertical shadow, blur distance, and the color of the shadow:
CSS3 box-shadow property
In CSS3, the CSS3 box-shadow property applies to box shadows.
Next, add color to the shadow
Next, add a blur effect to the shadow
You can also add shadow effects to the ::before and ::after pseudo-elements.
Example
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: 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;
}
Try it Yourself »
A special use case 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;
}
Text card » Image card »
CSS3 Text Overflow property
The CSS3 text-overflow property specifies how overflowed content should be displayed 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;
}
Try it Yourself »
CSS3 Line Breaks
If a word is too long to fit within an area, it extends outside.
In CSS3, the word-wrap property allows you to force text to wrap — even if it means splitting a word in the middle.
The CSS code is as follows:
CSS3 Word Breaking/Wrapping
The CSS3 word-break property specifies line breaking rules.
The CSS code is as follows:
New text properties
| Property | Description | CSS |
|---|---|---|
| hanging-punctuation | Specifies whether punctuation characters are placed outside the line box. | 3 |
| punctuation-trim | Specifies whether to trim punctuation characters. | 3 |
| text-align-last | Sets how the last line or the line immediately before a forced line break is aligned. | 3 |
| text-emphasis | Applies emphasis marks to the text of an element and the foreground color of the emphasis marks. | 3 |
| text-justify | Specifies the alignment method used when text-align is set to "justify". | 3 |
| text-outline | Specifies the outline of the text. | 3 |
| text-overflow | Specifies what happens when text overflows the containing element. | 3 |
| text-shadow | Adds shadow to text. | 3 |
| text-wrap | Specifies the line-breaking rules for text. | 3 |
| word-break | Specifies the line-breaking rules for non-CJK text. | 3 |
| word-wrap | Allows long unbreakable words to be broken and wrapped to the next line. | 3 |