CSS and GIFs.

Ah the good old days, animated gifs instead of chunky incompatible flash, I remember those.

Are you in the phase of keeping bandwidth to an all time low on your site? You feel using graphics in your CSS layouts is going to push your bandwidth back up. It doesn't have to, you can still have a low bandwidth site and still use graphical enhancements.

I'll show you how.

Lets start with the basic <acronym> tag.
This tag lets you add acronym information, general information, any information you want related to that body of text. Its like the title="" tag which displays a tooltip over a text link. The good thing about <acronym> is no link has to be assigned.

Now that is out of the way lets get into how we can animate our <acronym> tag.

Here is our xhtml code:

<acronym title="Cascading Style Sheets">CSS</acronym>

The title or displayed text in the tooltip will be Cascading Style Sheets, and the acronym in the body text is CSS.

Here is our CSS code:

acronym {
cursor: help;
background: url(acronym.gif) repeat-x 0px 13px;
}

Now we need to set our acronym attributes in our CSS. Call in acronym without a . or # because its a standard xhtml/html element.To start off our visual effect I used the old school method of using the inbuilt question mark cursor. Now here is the winning feature, we use the background attribute to call in a image called acronym.gif. This image is 1px x 1px. It will repeat its animation indefinitely which is a fade in/out effect. This can be created in Adobe ImageReady or any gif animation software.

The next part tells the image to repeat itself on the x axis, which is the horizontal axis so it can adjust itself according to the word length.

The next part tells the image not to position itself horozontally but 13 pixels vertically. If we left it as 0 the image would sit right in the middle of the text.

If your text is smaller or larger you will need to adjust this.

Thats it, you now should have an animated gif on your acronym tag. Remember this method can be used anywhere throughout your CSS.

Be creative, you don't have to just use this style of image, it could be a qestion mark image fading in and out, or a picture, its up to you. Have a look at my menu, it uses this method but instead of always looping, it only does it once.

Please note: This method does not work to well with in-browser font resizes, due to the pixel position on the image.

Have fun.