Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Bitmaps (and Mario) in Pure CSS3

DZone's Guide to

Bitmaps (and Mario) in Pure CSS3

· Web Dev Zone
Free Resource

Try RAD Studio for FREE!  It’s the fastest way to develop cross-platform Native Apps with flexible Cloud services and broad IoT connectivity. Start Your Trial Today!

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

 

Get Your Apps to Customers 5X Faster with RAD Studio. Brought to you in partnership with Embarcadero.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}