Using Text Decorations - HTML

You can add several different effects to text through CSS. Most are accomplished via the text-decoration and text-shadow properties.

The text-decoration property allows you to add the following attributes to text:

  • underline
  • overline (line above text)
  • line-through
  • blink

As with most properties, the values are straightforward:

The text-shadow property is a bit more complex, but can add stunning drop shadow effects to text. The text-shadow property has the following format:

text-shadow: “[color] horizontal-distancevertical-distance [blur]”

The property takes two values to offset the shadow, one horizontal, the other vertical. Positive values set the shadow down and to the right. Negative values setthe shadow up and to the left. Using combinations of negative and positive settings, you can move the shadow to any location relative to the text it affects. The optional color value sets the color of the shadow. The blur value specifies the blur radius—or the width of the effect—for the shadow. Note that the exact algorithm for computing the blur radius is not specified by the CSS specification—as such your experience may vary with this value.

The text-shadow property allows multiple shadow definitions, for multiple shadows. Simply separate the definitions with commas. The following code creates a drop shadow on all <h1> headlines. The shadow is set to display above and to the right of the text, in a gray color.

h1 { text-shadow: #666666 2em -2em; }

The following definition provides the same shadow as the previous example, but adds another, lighter gray shadow directly below the text:

h1 { text-shadow: #666666 2em -2em, #AAAAAA 0em 2em; }

Unfortunately, not many user agents support text-shadow. If you want such an effect, you might be better off creating it with a graphic instead of text.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics