HTML Text Special Effects

• HTML and CSS can produce some nice text effects in addition to standard formatting such as font size and background color. Special HTML effects make text look and behave in unusual ways that catch the viewer's interest. Use them to liven up a dull Web page or enhance plain text.

Drop Cap

• In word processing, a drop cap enlarges the first letter of a paragraph. You can reproduce the drop cap effect on your Web pages using HTML and CSS. Use the "float" property to align the drop cap and "font-size" to increase its size relative to the rest of the text in the paragraph. Enclose the character in the "span" tags.

  Example:

  <p><span style="float:left; width:0.7em; line-height:80%; font-size:350%">T</span>his is an example of a drop cap effect using the float property.

Scrolling Text

• The marquee effect in HTML makes text move in different ways. The "direction" in the code tells a browser where the text will move: up, down, left or right. The "behavior" attribute describes how the text will move: "Scroll" makes the text move beyond the visible marquee area and then start over; "slide" makes it stop at the end of the marquee; "alternate" causes the text to move from one side to the other. Use "scrollamount" to determine speed; the higher the number, the faster the scroll rate.

  Example:

  <div style="width:300px"><marquee behavior="alternate" direction="up" "scrollamount="3" bgcolor="yellow">Scrolling text up!</marquee></div>

Mouseover Title

• The HTML span tag causes a text to appear over the area where you insert it. For example, if you want to add a summary to a paragraph, insert the text using the span tag.

  Example:

  <p span title="Summary of Chapter 1">Paragraph text here.</p>