Did you find this useful?
Socialize it today.


CSS3 Text Effects

Monday, November 26, 2012

browser

CSS3 brings additional flexibility to web developers when working with text. For example, with CSS3, it is now easy to apply shadows to your text, or handle word-wrapping and overflow of text. With regard to shadows, this eliminates the need to create a separate image that contains the text and shadow, like you would when using popular image editing software.


The text-shadow Property

The property used to apply a shadow to your selected text is 'text-shadow'. The text-shadow property is supported in all major browsers, except Internet Explorer.


Your browser may support the text-shadow property.

text-shadow Syntax

The text-shadow property applies shadow to text. The text-shadow property has no default value assigned to it.


text-shadow: h-shadow v-shadow blur color;


ValueDescription
h-shadowA required value for the position of the horizontal shadow. Negative values are acceptable
v-shadowA required value for the position of the vertical shadow. Negative values are acceptable
blurOptional value for the blur distance
colorOptional value for the color of the shadow


Example

You should note that the text-shadow property does support one or more shadows attached to the text. When attaching more than one shadow, separate the set of values with a comma.


<!DOCTYPE html>
<html>
<head>
<style> 
#myText {
   font-size: 4em;
   text-shadow:3px 3px gray;
}
</style>
</head>
<body>

<span id="myText">Text Shadow</span>

</body>
</html>


text-shadow

The word-wrap Property

The word-wrap property allows long words to be able to be broken and wrapped onto the next line. This property allows for two values; normal or break-word. The word-wrap property is supported in all major browsers.

Your browser may support the word-wrap property.

word-wrap Syntax

The word-wrap property allows long words to be able to be broken and wrap onto the next line. The default value is 'normal'.


word-wrap: break-word|normal;


ValueDescription
break-wordAllows words that are normally not able to be broken to wrap
normalBreak words only at allowed break points


Example

<!DOCTYPE html>
<html>
<head>
<style> 
#myText {
   width:11em; 
   border:1px solid #7f7f7f;
   word-wrap:break-word;
}
</style>
</head>
<body>

<p id="myText">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. 
    The long word will break and wrap to the next line.</p>

</body>
</html>


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

The text-overflow Property

There may be instances where you will need for the text in the element to be clipped such as when it overflows the element’s box. When this occurs, you want to leave a visual hint to the user that text has been clipped. The text-overflow property is supported in all major browsers.

Your browser may support the text-overflow property.

text-overflow Syntax

The text-overflow property specifies what should happen when text overflows the containing element. The default value is 'clip'.


text-overflow: clip|ellipsis|string;


ValueDescription
ClipClips the text
EllipsisDisplay an ellipsis ("...") to represent clipped text
StringString to represent clipped text


Example

<!DOCTYPE html>
<html>
<head>
<style> 
p {
   width:300px; 
   border:1px solid #7f7f7f;
   white-space:nowrap;
   overflow:hidden;
}
</style>
</head>
<body>

<p style="text-overflow:clip;" >This is some long text that will not fit in the box. The text should be clipped.</p>
<p style="text-overflow:ellipsis;" >This is some long text that will not fit in the box. You should see an ellipsis.</p>

</body>
</html>


This is some long text that will not fit in the box. The text should be clipped.


This is some long text that will not fit in the box. You should see an ellipsis.



Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

The Book of CSS3 Responsive Web Design with HTML5 and CSS3 Sergeys HTML5 CSS3