Text Effects

There are a couple of simple text effects that can be produced just by using HTML tags. If you need more complicated effects you could use animated GIF images or JavaScript. However, be aware that any animated or flashing objects can make pages difficult to read for people with certain types of vision impairment.

Flashing Text

This is a non-standard tag (it only works with Netscape browsers) and can be very irritating if used on large areas of text, so use it sparingly.

<blink> ... </blink>

Place around text to make it .

(If you're not using Netscape Navigator you're really seeing an image that looks like the blink tag effect.)

The code could look like this:

<p>Place around text to make it <blink>flash</blink>.</p>

Moving Text

Another non-standard tag that can be as irritating as the <blink> tag is <marquee>. This can be used to create a moving text effect, similar to some "matrix" type LED and illuminated signs. There are quite a few options to control the appearance of text formatted with this tag, the main ones are listed below. This tag works on Internet Explorer and later versions of Netscape Navigator. In early versions of Netscape Navigator you will see the text as a normal paragraph, it will not scroll.

<marquee ... >

This tag starts the Marquee, the following four attributes should be put in this tag before the closing >.

behavior="..."

This attribute can be "scroll", "slide" or "alternate". Scroll makes the text scroll all the way across, off the edge and then starts again. Slide makes the text scroll in like "scroll" but it stops when it reaches the far edge. Alternate makes the text bounce back and forth between its' edges.

bgcolor="#..."

This will change the colour of the background using the usual colour conventions.

loop="6"

Specifies the number of times the effect will run, e.g. six times, or you can specify "infinite" or "-1" to loop continuously. 

width="300"

Specifies the width of the marquee effect in pixels, or you can specify it as a percentage of the space available, e.g. "40%".

Message Text

After the opening <marquee ... > tag type the text that will scroll.

</marquee>

This is the end tag.

The code could look like this:

<marquee behavior="scroll" bgcolor="#00CCCC" loop="-1" width="40%">Demonstration of a Marquee tag.</marquee>

If you are using Internet Explorer you will see a "real" marquee below, if you are using another browser you will see an image that shows you what the effect would look like: