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.

7 Comments

  1. Aha! Animated gifs on rollovers ay? That’s all well and good, but can you bring forth the knowledge of which I wish to attain? …

    http://www.kevadamson.com/extras/2005/07/animated-gif-backgrounds-n-rollovers.html

    (sorry if that url broke yu layout!)

  2. Why am I seeing your old website? Even after refreshing cache etc…

  3. another day later…still seeing your old design. nevermind the matter, that little rollover thing kind of reminded me of this site by name of Steinruck:
    http://www.steinruckdesign.com/

    Difference being yours animates, the other just moves slightly and…well…is still kind of neat.

  4. Kev: It looks to be not broken to me. I’ll turn your url into a link though. I’ll read you post in a sec and look into the knowledge of which you wish to attain.

    Dustin: Hey, it does kinda look like the thing on Steinruck. My content footer looks even more similar. For those not on IE, when you hover over the footer div (at the bottom of the left column) you can see it better. I know I’ve seen this website before, but I didn’t look at it or think about it when I was working on the Photoshop files for this design…Unless I was unconciously doing that whole Jedi Mind Meld™ thing again.

    About the old theme thing…have you cleared cookies? Most likely, you used the little dropdown list design switcher at some point in the past and have a cookie set to 1900. You can either clear your cookies or go to the homepage and select “Contemporary Home”. If you don’t have cookies enabled, you should see the Contemporary theme by default.

  5. Ah. Got it. Maybe I won’t clear my cookies… it’ll be like visiting two websites…new by day, old by night..

  6. That’s actually not a bad idea. At Acceleration we did something similar for The Swamp Restaurant. If you go there at night EST, you’ll see a nighttime header image instead of the daytime picture of the restaurant. It might be kinda fun to make a night version on my new theme. It definitely wouldn’t be too difficult.

  7. It’s a wonderful solution, really. Thank you!

Leave a Comment

Latest Tweet
Somewhat Recent
The Whole Nine Yards