DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

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

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
  1. DZone
  2. Coding
  3. Languages
  4. Bitmaps (and Mario) in Pure CSS3

Bitmaps (and Mario) in Pure CSS3

John Esposito user avatar by
John Esposito
·
Jan. 04, 12 · Interview
Like (0)
Save
Tweet
Share
7.22K Views

Join the DZone community and get the full member experience.

Join For Free

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

 

CSS

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

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: