CSS3 Text Effects |

CSS3 Text Effects

CSS3 includes several new text features.

In this chapter you will learn about the following text attributes:

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 Shadow

In CSS3, the text-shadow property applies to text shadows.

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

Example

Add shadow to the title:

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

Try it »

CSS3 box-shadow Property

In CSS3 the CSS3 box-shadow property applies to box shadows.

Example

div{box-shadow:10 px 10 px 5 px#888888; }

Try it »

Next Add Color to the Shadow

Example

div{box-shadow:10 px 10 px grey; }

Try it »

Next Add a Blur Effect to the Shadow

Example

div{box-shadow:10 px 10 px 5 px grey; }

Try it »

You Can Also Add Shadow Effects to ::before and ::after Pseudo-elements

Example

#boxshadow{position:relative; box-shadow:1 px 2 px 4 px rgba(0, 0, 0, .5); padding:10 px; background:white; }#boxshadow img{width:100%; border:1 px solid#8a4419; border-style:inset; }#boxshadow::after{content: ''; position:absolute; z-index: -1; box-shadow:0 15 px 20 px rgba(0, 0, 0, 0.3); width:70%; left:15%; height:100 px; bottom:0; }

Try it »

A Special Use Case for Shadows is the Card Effect

Example

div.card{width:250 px; box-shadow:0 4 px 8 px 0 rgba(0, 0, 0, 0.2), 0 6 px 20 px 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 to show overflowing content to the user.

Example

p.test1{white-space:nowrap; width:200 px; border:1 px solid#000000; overflow:hidden; text-overflow:clip; }p.test2{white-space:nowrap; width:200 px; border:1 px solid#000000; overflow:hidden; text-overflow:ellipsis; }

Try it »

CSS3 Word Wrap

If a word is too long to fit in an area, it extends outside:

In CSS3, the word-wrap property allows you to force text to break lines - even if it means splitting it in the middle of a word:

CSS code is as follows:

Example

Allow long text to wrap:

p{word-wrap:break-word;}

Try it »

CSS3 Word Break Line Break

The CSS3 word-break line-break property specifies line-breaking rules:

CSS code is as follows:

Example

p.test1{word-break:keep-all; }p.test2{word-break:break-all; }

Try it »

New Text Properties

Property	Description	CSS
hanging-punctuation	Specifies whether punctuation characters may hang outside the line box.	3
punctuation-trim	Specifies whether punctuation characters are trimmed.	3
text-align-last	Sets how to align the last line or the line immediately preceding a forced line break.	3
text-emphasis	Applies emphasis marks and the color of the emphasis marks to the text of the element.	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 the 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 breaking up long unseparable words and wrapping them to the next line.	3

YouTip