Bitmaps (and Mario) in Pure CSS3
Join the DZone community and get the full member experience.
Join For FreeLet'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...
Opinions expressed by DZone contributors are their own.
Trending
-
What Is Envoy Proxy?
-
13 Impressive Ways To Improve the Developer’s Experience by Using AI
-
How Web3 Is Driving Social and Financial Empowerment
-
The Role of AI and Programming in the Gaming Industry: A Look Beyond the Tables
Comments