Pages

Text Effects and Typographic Styles

Text content has been the backbone of the Web since its creation, yet for years weâ€™ve had to make do with a very limited set of tools. CSS3 hugely expands its typographic tool set by introducing a range of new and updated features in the Text Module.Â Chief among these features is the ability to add shadows to text. The new syntax is flexible enough to allow for some very nice effects. In addition to these are some less flashy effects but ones that can really do wonders for the readability of your text.

Â

Understanding Axes and Coordinates

One syntax concept thatâ€™s new to CSS3 is that of the axis . You may know all about axes if you remember your math lessons, but if youâ€™re reading this section, Iâ€™ll assume you need a refresher.

CSS uses the Cartesian coordinate system, which consists of two lines, one horizontal and one vertical that cross each other at a right angle. Each of these lines is an axis: The horizontal line is known as the x-axis, and the vertical line is known as the y-axis. The point where the two lines meet is called the origin.

For onscreen items, you measure the lengths of these axes in pixels. The above image, you can see the axes and origin are overlaid on a grid. Imagine that each square corresponds to a single pixel. Youâ€™ll also notice positive (+) and negative (â€“) labels at either end of each axis; these tell you that the distance away from the origin will be measured either positively or negatively in this direction.

Now that you understand this concept, you can find the coordinates of any point relative to the origin. The coordinates are a pair of values which indicate the distance from the origin. The origin has coordinates (0, 0).

For example, given the coordinates (4, 5) you would find the point by moving 4 pixels along the x-axis, and 5 pixels along the y-axis. Likewise, the coordinates (â€“3, â€“1) indicate a point 3 pixels in a negative direction away from the origin along the x-axis and 1 pixel away from the origin in a negative direction along the y-axis.

In CSS, all elements have a height and a width, each of which is a stated number of pixels in length. The height and width together creates a pixel grid; for example, an element that is 10px by 10px in size has a pixel grid of 100px. If you consider that the origin of the element is at the top-left corner, then the two positional values for properties like background-position correspond exactly to the x and y coordinates.

Applying Dimensional Effects: text-shadow

The ability to apply drop shadows to text using the text-shadow property has been around for a long time;

The position of the shadow is set using the x and y coordinates. The simplest form of the syntax accepts two values: x to set the horizontal distance from the text (known as the x-offset) and y to set the vertical distance (the y-offset):

By default, the shadow will be the color that it inherited from its parent (usually black), so if you want to specify a different color, you need to provide a value for that, such as:

E { text-shadow: x y color; }

Example 1

{code}TextShadow{ text-shadow: 3px 3px #BBB;}{/code}

You can use both 0 (zero) and negative numbers to get different effects.

The text-shadow property also has a fourth option: blur-radius. This option sets the extent of a blur effect on the shadow and must be used after the offset values:

E { text-shadow: x y blur-radius color; }

The blur-radius value is, like the two offset values, also an integer with a length unit; the higher the value, the wider (and lighter) the blur. If no value is supplied, the blur-radius is assumed to be zero. Here are a couple of examples:

Example 2

{code}.Black { text-shadow: 3px 3px 3px #BBB; }{/code}

Example 3

HTML

CSS

{code}.White { text-shadow: 0 0 3px #000; }{/code}

In the first example, I set the blur-radius value of 3px. The result is a much softer, more â€œnaturalâ€ shadow. In the second example, Iâ€™ve set 0 values for the offsets and a 3px blur-radius, matching the text to the background and creating the illusion that the text is raised.

Multiple Shadows

You donâ€™t have to limit yourself to a single shadow, text-shadowâ€™s syntax supports adding multiple shadows to a text node. Just supply extra values to the property, using commas to separate them, like so:

E { text-shadow: value, value, value; }

The shadows will be applied in the order you supply the values.

{code}.one {

text-shadow:

0 -2px 3px #FFF,

0 -4px 3px #AAA,

0 -6px 6px #666,

0 -8px 9px #000;

}{/code}

{code}.two {

color: #FFF;

text-shadow:

0 2px rgba(0,0,0,0.4),

0 4px rgba(0,0,0,0.4),

0 6px rgba(0,0,0,0.4),

0 8px 0 rgba(0,0,0,0.4);

}{/code}

In the first example, Iâ€™ve kept the x-offset at 0 while increasing the y-offsetâ€™s negative value from â€“2px to â€“8px. The blur-radius increases from 3px to 9px, and the color gets gradually darker, creating a ghostly pale outline behind the characters, which becomes a darker shadow as it, gets further from the characters.

In the second example, the x-offset also remains consistent, but this time the y-offset increases its value positively. Because the blur-radius isnâ€™t specified, it stays at zero. Here Iâ€™ve used the rgba() color function so the color stays the same but is partially transparent, creating an overlapping effect.

Although the value changes are fairly small, the visual difference between the two elements is quite profound.

Letterpress Effect

An effect thatâ€™s very popular at the moment is the letterpress style. This style gives the illusion that the characters are impressed slightly into the background, as if theyâ€™d been stamped into a material. This effect is easy to achieve with CSS3.

To create this effect, you need four tones of a color: dark for the characters, medium for the background, and lighter and darker for the shadow. Then you add text-shadow with multiple valuesâ€”a dark (or black) and a light, as in this example: