Over a million developers have joined DZone.

Bitmaps (and Mario) in Pure CSS3

DZone's Guide to

Bitmaps (and Mario) in Pure CSS3

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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...


What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}