Today we’re going to talk about text effects and how they make a website become eye candy. If you, for example, visit atomicpages.net under the website management, website setup, and latest blog posts you will notice a slightly darker shadow right below the text. This is a text effect that makes a website less boring to look at.

text-shadow

The text-shadow property isn’t at all new to CSS3. Originally, this property was going to be used with CSS2 which is what all of the Basics of CSS tutorials are based off of.

This property will allow us to create photoshop-like effects without having to use photoshop and saving the text as an image. Here is an example:

Some fancy text here

Notice how the font has a dark shadow as if the light were coming from about 11 o’clock.

The general syntax for the text-shadow property is as follows:

1
2
3

text-shadow:[x-pos] [y-pos] [blur radius] [color];
text-shadow:2px 2px 2px #000;

In the example above, the shadow will be 2px on the positive x-axis, 2px on the positive y-axis, and have a blur radius of 2px with a color of #000 (black).

Note: the [x-pos] and [y-pos] will take any positive or negative integer.

Some fancy text here

Which browsers support text-shadow?

Not all browsers today support the text-shadow property, here is a list of browsers that support this property:

Supported Not Supported
  • Safari 3+
  • Opera 9.5+
  • Firefox 3.1+
  • Chrome 1+
  • Konqueror
  • Internet Explorer 6+
  • Internet Explorer 7+
  • Internet Explorer 8+
  • Flock 2.x

word-wrap

Amazingly enough, the word-wrap was invented by Microsoft and has been implemented into CSS3. This property allows for long words in any given element to be broken and wrapped in a new line. Consider the following:

Without word-wrap

Some text here. Inthebrokwnwindowsargument,peoplearguethatthereisno net gain from the creation of jobs.

Width word-wrap

Some text here. Inthebrokwnwindowsargument,peoplearguethatthereisno net gain from the creation of jobs.

The values for word-wrap are normal and break-word.

1
2
3

.wrap {word-wrap:break-word;}
.wrap {word-wrap:normal;} /*this is default*/

In the example above, we used:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!--without word-wrap-->
<div style="border:1px solid #000; padding:3px; width:200px;
word-wrap:normal;">Some text here.
Inthebrokwnwindowsargument,peoplearguethatthereisno
net gain from the creation of jobs.</div>
<!--with word-wrap-->
<div style="border:1px solid #000; padding:3px; width:200px;
word-wrap:break-word;">Some text here.
Inthebrokwnwindowsargument,peoplearguethatthereisno
net gain from the creation of jobs.</div>

Using this method you can break larger words into smaller chunks.

Sources:
1: http://www.w3.org/TR/css3-text/