Text Special Effects

Now that we have looked into how text is styled and positioned and what properties are used, we will move on to some miscellaneous decorative properties that can be used in niche scenarios or for stylistic/design purposes.

text-decoration

CSS's text-decoration property allows you to specify the text's decorations (such as underlines, overlines, or strikethroughs). The syntax for the text-decoration property is:

css
9
1
2
3
element {
  text-decoration: none | underline | overline | line-through | blink;
}

The none value specifies that the text should not have any decorations, the underline value adds an underline to the text, the overline value adds an overline to the text, the line-through value adds a strikethrough to the text, and the blink value makes the text blink (although this value is not widely supported and is not recommended for use).

Here's an example of how you might use the text-decoration property to add an underline to a paragraph:

text-transform

The text-transform property in CSS allows you to specify the capitalization of the text. The syntax for the text-transform property is:

css
9
1
2
3
element {
  text-transform: none | capitalize | uppercase | lowercase;
}

text-shadow

The text-shadow property in CSS allows you to add a shadow effect to the text. The syntax for the text-shadow property is:

css
9
1
2
3
element {
  text-shadow: <horizontal-offset> <vertical-offset> <blur-radius> <color>;
}

The horizontal-offset and vertical-offset values specify the distance of the shadow from the text, the blur-radius value specifies the amount of blur to apply to the shadow, and the color value specifies the color of the shadow.

Here's an example of how you might use the text-shadow property to add a red shadow with a horizontal offset of 2 pixels and a vertical offset of 1 pixel to a heading element:

css
9
1
2
3
h2 {
  text-shadow: 2px 1px 0px red;
}

You can also specify multiple shadows by separating them with a comma. For example, the following code will add a blue shadow with a horizontal offset of -2 pixels and a vertical offset of -1 pixel, as well as a red shadow with a horizontal offset of 2 pixels and a vertical offset of 1 pixel.

css
9
1
2
3
h1 {
  text-shadow: -2px -1px 0px blue, 2px 1px 0px red;
}