Monday, September 5, 2011

Advanced CSS3 Tutorial 8: Text Effects

Today I'll show you have to add text shadow and word wrap.


In CSS3, the text-shadow property applies shadow to text.
You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

text-shadow: 5px 5px 5px #FF0000;

Note: This is not supported in Internet Explorer yet.


If a word is too long to fit within an area, it expands outside.
n CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word.

p {word-wrap:break-word;}