CSS Animation: The Ultimate Web Design Easter Egg

Matthew Magain

Our third tutorial for CSS Theme Week went live today — a new article titled Warning: This Secret CSS Technique Could Surprise You!.

Read previous articles from CSS Theme Week:

Today’s article was written by our own Alex Walker, a man with an unhealthy obsession for spotting an anomaly and exploring it in great detail (I sit next to Alex, so I know how much time he put into this tutorial). This article is the result of that exploring.

A while back Alex published a blog post about the fun that could be had when you explored overlapping CSS background images. At that stage, the effect he had produced was interesting and useful, though admittedly in limited cases (we applied it to the ad on the front page of sitepoint.com to promote our Art & Science of JavaScript book). While not immediately practical in every situation, it demonstrated one way of embedding a hidden feature into your page — an “easter egg” for your users.

Those easter eggs aren’t going to make or break your design — in fact, chances are that most of them won’t notice it — but they’re a nice touch and an attention to detail that might make a few users raise an eyebrow. The very same effect was even used by the folks at Clearleft to create the parallax effect used on the landing page for their Silverback usability testing software.

The next logical step in Alex’s thinking was to push this technique to its limit. The result is an animation that runs only when the user resizes the window. Oh, and it doesn’t use any JavaScript. Check out the example.

The obvious question, of course, is why would you go to all the trouble? Creating the graphics for this effect is far from trivial.

The answer is simple: because you can. There are techniques that web designers the world over use every day — image replacement, sliding doors, faux columns… all of these techniques originated because someone thought “What if…?”

Perhaps you’ll find a way to use this technique to do something interesting, something cool, or something useful. If you do, be sure to let us know in the comments of this post.

Oh, and don’t forget to thank Alex for daring to think he might be able to make an animation implemented purely in CSS, triggered by the user resizing the window. I know if he’d told me his plans prior to writing this tutorial, I’d have told him that he was crazy.

Actually, I still think he might be. You be the judge …

Read the article on sitepoint.com.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • BillyG

    Cool. It reminds me of Stu’s hover over effect from http://www.cssplay.co.uk/menu/superanimation.html

  • http://www.sitepoint.com Mark Harbottle

    This is one of those things that if we had have known Alex was working on we might have said “don’t waste your time” but when he does it anyway and you see the end result you’re glad he just went for it. Full points for lateral thinking and pushing the boundaries.

  • http://www.jtresidder.com/ jtresidder

    Here’s another good effect along these lines, for those who haven’t seen it – CSS Parallax (…and here’s a how-to for it).