In the previous chapter you learnt about the CSS3 Multiple Columns. In this chapter we will learn about the CSS3 Text Effect, which is one of the best features of CSS3
CSS3 Text Effects
A CSS3 Text Effect is a such term which is used to implement some extra features on normal text. CSS3 Text Effect is used to extend the text features for viewing and layout purpose.
Their are mainly two properties of CSS3 Text Effects, which have been described as follows:
✔ text-shadow
✔ word-wrap
Where text-shadow is used to create the shadow around the text, We can change the shadow color also. And word-wrap is used to break the continued text in another line. It means whenever we get difficulty to break the line of sentence we can generally use this css3 text-wrap property.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#text_shadow
{
text-shadow: 20px 20px 10px #6AAFCF;
}
#word_wrap
{
word-wrap:break-word;
width:150px;
border:1px solid #ff0000;
}
#no_wrap
{
width:150px;
border:1px solid #ff0000;
}
</style>
</head>
<body>
<div id="text_shadow"><h1>Text Shadow</h1></div>
<div id="word_wrap">you can't break the line hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.</div>
<p>Without using word-wrap text will go like this.</p>
<div id="no_wrap">you can't break the line hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.</div>
</body>
</html>