CSS3 Text Effects

March 14, 2015
by Inaam Hussain

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

Text Shadow

CSS
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.

Text Wrapping

Text Wrapping

CSS
p {
    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>

 

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

Leave a Comment