Introduction to CSS3 Text Effects

The new CSS3 properties give developers a wonderful chance to enhance their designs in a way that’s quick and easy, yet visually impressive. To give a website a visually impressive look, designers put emphasis on neat and stylish typography. For years designers have depended on Photoshop, but CSS3 is a revolution with easy-to-create text effects. Almost all of the major browsers now support most of the CSS3 features so that’s another reason for mastering the new techniques.

Other useful CSS articles:

CSS3 Text Shadow

Text shadows sound a little tacky, but it all depends how they are executed. Shadows could definitely be put to good use in headings and titles.

Text Shadows Syntax:

text-shadow: horizontal-offset vertical-offset blur color;

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1
{
text-shadow: 8px 8px 8px #0000FF;
}
</style>
</head>

<body>

<h1>CSS3 Text Shadow Effect</h1>

</body>
</html>

Letterpress Text Shadow

The great thing about text-shadows is that you can actually do a lot more with them than your average drop shadow. For instance, here’s a quick trick for creating the illusion of inset text.

body {
background: #222;
}

h1 {
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

CSS3 Word Wrapping

The new word wrapping ability allows you to force the text to wrap – even if it means splitting it mid-word. The code is incredibly straight forward:

.textWrap {
word-wrap:  break-word;
}

Web Fonts

An example of how this could be achieved would be:

@font-face {
font-family: 'Name of the new font';
src: url('http://www.tutorialchip.com/fonts/font.ttf');
}

Important Text Effect Properties

text-shadow – Adds shadow to text

text-wrap – Specifies line breaking rules for text

word-break – Specifies line breaking rules

text-outline – Specifies a text outline

word-wrap – Allows long, unbreakable words to be broken and wrap to the next line

text-justify – Specifies the justification method used when text-align is ‘justify’

text-overflow – Specifies what should happen when text overflows the containing element

text-emphasis – Applies emphasis marks, and the foreground color of the emphasis marks, to the element’s text

text-align-last – Describes how the last line of a block or a line right before a forced line break is aligned when text-align is ‘justify’

In Closing

All these CSS3 text effects are great when used in a subtle way, enhancing the typographic layout of the page. Now every browser supports CSS3 properties, so designers can now create smart web designs in a few minutes with CSS3. Leave a comment below and let us know what you think of the text effects above. Which one is your favorite?