Google Doodle always amazes each one of us which their extra ordinary creativeness. Be it the Guitar Le Paul’s birthday or today’s Google doodle on Art Clokey’s birthday. When I opened twitter this morning found that lot many people are discussing about the Google Doodle being made in flash. However, the fact is Google never uses Flash for their Doodles, at least I have not noticed one. What they use is the latest technologies like HTML5, CSS3 to showcase stuff similar to flash. This also proves that the new web technologies, which the world has been talking about is almost near to what one can achieve in Adobe Flash. It’s worth mentioning that you need not install any 3rd party plugin to experience the apps done in HTML5.
In this post I will try to share my understanding on today’s Google Doodle. In short, Google has not used flash to build those effects but instead utilized the CSS sprite hack. Let’s understand how is it done.
Decoding Google Doodle
Have a look at these two images –
These two images contain the secret of the animation. Moreover, If you scroll the second image horizontally when opened in browser, you may be able to replicate some of the animation. Some of you might get what exactly is happening here. But for those who are not experienced well with CSS sprite may read on.
So to produce the rising affect this doodle utilized the CSS background-position property. It changes the horizontal position of the background image and to us it appears like an animation. Clever no ?
I hope this explanation of Google Doodle will help you understand the CSS Sprites and how they work. If you are a web developer then you already have some nice ideas sprouting in your brain.