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.
Text Shadow
CSS
h2 {
text-shadow: 5px 5px 5px #FF0000; /* horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow */
}
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.
Text Wrapping
CSS
p {
word-wrap: break-word;
}
word-wrap: break-word;
}
Full HTML & CSS Code
HTML & CSS
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-shadow: 5px 5px 5px #FF0000;
}
p.word {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<h2>Text-shadow effect!</h2>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, does not support the text-shadow property.</p>
<p class="word"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
<html>
<head>
<style>
h2 {
text-shadow: 5px 5px 5px #FF0000;
}
p.word {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<h2>Text-shadow effect!</h2>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, does not support the text-shadow property.</p>
<p class="word"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
