NPCRTAGBIL

I had a few people say they liked the animated logo rollover in the upper right corner of my new design. How did I do it? Well I’m glad you asked. It’s a Non-Preloading CSS Rollover Transparent Animated Gif Background Image Link. What? Too many adjectives? No way! The more the better, so…Yea! It’s bound to be at least as popular as Diet Cherry Vanilla Dr. Pepper.

Let me first say that designing a new css theme for an existing XHTML site (especially when I’ve learned a lot since I wrote the original XHTML) is a pain in the butt. I would much rather start from scratch with a new XHTML template and all new css…but in this case, I just wanted a new theme and I avoided the temptation to re-write all the XHTML. Well, when I was creating this new theme for the site, I noticed that I had a link with my logo in it as part of the xhtml. In the 1900s theme, I was hiding that link, since I only wanted it to serve as a header/home-button for the non-styled version of the site. For the new theme however, I planned on putting in some css to hide the img tag inside of it and use it as an absolutely positioned design element for the site. When I made my Photoshop mockup, I planned for this with the “Making this place feel like home.” starburst logo thingy you see to your upper right.

In my typical “that’s just not good enough” fashion, I decided that… it wasn’t good enough. I decided to make the image into a rollover and that I was going to use the tried and true non-preloading method of doing css rollovers that involves creating a background image with the hover and non-hover states adjacent to one another, and toggling the background position in the CSS in the :hover state for my link. I would explain this here, but it has been well documented here, here, here, here, and here.

OK, So that’s the Non-Preloading CSS Rollover Background Image Link. What about the Transparent and Animated part? In short, Animated came first and Transparent was a necessary evil. I made this nice little 3 frame gif animation of the starburst rotating and incorporated it into the rollover image and realized once I got it in place that it covered up part of my ceiling beams. So I decided to take advantage of the full power of the mighty GIF format to make it Transparent AND Animated. After all that explanation, I give you the final image, the Transparent, Animated part of my Non-Preloading CSS Rollover Transparent Animated Gif Background Image Link:

Weighing in at only 20kb, I think it’s an impressive little 3 frame transparent animated gif. I could sit and watch it spin all day long.

About this Entry