CSS3 Text Effects

Following text effects we can do using CSS3.

List of Text Effects Properties

• text-shadow
• word-wrap

 

CSS3 Text Shadow

In CSS3, we can apply shadow to text.

See below image and css code.

 


h2 {
text-shadow: 5px 5px 5px #FF0000; /* horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow */
}


 

CSS3 Word Wrapping

When we write some text with in content area and if word is too long that doesn’t fit in.

So, by using word-wrap we can easily customize word with in content area.

See below image and css code.


p {
word-wrap: break-word;
}


 

Full HTML & CSS Code

Text-shadow effect!

Note: Internet Explorer 9 and earlier versions, does not support the text-shadow property.

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.