CSS Animation: The Ultimate Web Design Easter EggBy 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.
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 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 …