Fat Agnus

This technique is about having different layers with background images sliding on top of each other, so if you for example are going to create some sort of tab navigation on a web site, then you can use this technique so you don`t have to make a new image for each tab just so the tab fits the text.

Many have written about this technique on the net and the first time I heard about it was when David Bowman made an example on “A list apart“. Even though there are a lot of examples on how to use this technique, not many have made examples on how to shift the tab background when you hover over a tab.

Lets` begin

Not long ago I made an example on how you could apply the sprite technique with css (how to create sprites) and since a few good people liked that effect, then why not apply it to the Sliding Door effect as well because it will save us a little bit of time when we are going to create the tab(s) (see my sprite tab here).

Ok, so we got a tab now, let`s look at the html.

1
2
3
4
5
6

  <div id="sprites">
	<a id="top-left" href="#top-left" ></a>
	<a id="top-right" href="#top-right" ></a>
	<a id="bottom-left" href="#bottom-left" ></a>
	<a id="bottom-right" href="#bottom-right" ></a>
  </div>

Somebody might wonder why I have put a span tag inside the a tag, but the explanation is simple… because of IE.

Internet Explorer has only implemented :hover on the a tag (this will change in IE7), so if we want to make it work in IE6, then we have to put the span tag inside it, so we can change the background image of the element when we hover over the tab.

Another difference from other examples is that they use “inline” to make the list float horizontal, but since that technique will give you some grief (rendering errors), then we will use “float” instead (warning: “float” can cause you a headache).

Example 1 (See the source code for more info)