Bitmaps (and Mario) in Pure CSS3

Let's get the awesome out of the way: yes, Tom Giannattasio did create an animated, running Mario in pure CSS3:

(Go ahead and click through: the screenshot doesn't do the smooth keyframes justice.)

So that's fun, and nostalgic, and neat. But you've seen plenty of pure CSS3 before, and maybe you're not really a Mario kind of developer...

But more interesting than the result is the technique: this CSS really does define actual pixels. Tom's description:

The piCSSelz (see what I did there) are drawn with CSS gradients sized precisely to pixel boundaries. There are certainly more practical uses for this technique, but none quite as nostalgic. Stay tuned for more examples, wider support and a code generator!

Nice. For example:

.mario .sprite {
	position: absolute;
	left: 4px;
...
	width: 204px;
	height: 56px;
	background-image: -webkit-linear-gradient(left, transparent 0%, transparent 9.80392156863%, #000000 9.80392156863%, #000000 11.7647058824%, transparent 11.7647058824%, transparent 14.7058823529%, #000000 14.7058823529%, #000000 16.6666666667%, transparent 16.6666666667%, transparent 35.2941176471%, #000000 35.2941176471%, #000000 37.2549019608%, transparent 37.2549019608%, transparent 40.1960784314%, #000000 40.1960784314%, #000000 42.1568627451%, transparent 42.1568627451%,...;
	background-position: 0 0px, 0 2px, 0 4px, 0 6px, 0 8px, 0 10px, 0 12px, 0 14px, 0 16px, 0 18px, 0 20px, 0 22px, 0 24px, 0 26px, 0 28px, 0 30px, 0 32px, 0 34px, 0 36px, 0 38px, 0 40px, 0 42px, 0 44px, 0 46px, 0 48px, 0 50px, 0 52px, 0 54px;
	background-size: 204px 2px;	
	background-repeat: no-repeat;
}

I've cut out a ton of CSS there, but you get the idea. Not super-practical for hand-coding, but -- well, they are actually CSS linear gradients used as picture elements.

Take a look at the site or the source (1,2), and maybe stay tuned for the promised code generator. Or maybe just enjoy Mario running and see if you can map all the 'piCSSelz' in your head...