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.

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.

Matthew Magain is a UX designer with over 15 years of experience creating exceptional digital experiences for companies such as IBM, Australia Post, and sitepoint.com. He is the co-founder of UX Mastery, and recently co-authored Everyday UX, an inspiring collection of interviews with some of the best UX Designers in the world.