On the Downlow(res): A Showcase of CSS Pixel Art

With display technology currently in a sort of golden age, you may be curious as to why so many of us are still hung up on pixel art. Why, with 4k monitors and HiDPI screens, would anyone care about block-style images made popular in the 1980s?

First of all, there are the memories of days gone by. Classic 8-bit (and even lower resolution) video games always seem to bring a smile to old and young alike. Then there is the peace that comes along with embracing simplicity. While so many modern graphics are incredibly lifelike, the simple innocence of a stack of pixels provides a friendly escape.

It’s something that just about anyone can create and recognize. Plus, it also serves as an ironic reminder of how far we’ve come.

To celebrate this humble artform, we’ve put together some unique examples built with CSS, along with a dash of JavaScript and other code helpers. And, oh yes, a bit of love is included for good measure. Enjoy!

A Jagged Little Watermelon

Despite its simple nature, one of the great things about pixel art is that it can be used to create a fairly accurate rendering of any object. Maybe this watermelon isn’t dripping with sweet juice, but there’s also no denying that it’s instantly-recognizable. All with a few lines of CSS.

Going Batty

As so many of us are familiar with pixel art via video games, animation is a big part of their charm. In this example, a bat furiously flaps its wings. Even though this type of movement isn’t highly-detailed, it demonstrates how an artist can make the most of the available pixels.

An Old Ghost with New Tricks

Amongst pixelated characters, none is more famous than PAC-MAN (along with the lovely Mrs. as well). However, those colorful ghosts also deserve some love. This ode to one of the supernatural villains has been updated for more modern times – as a hipster.

Under an Atari Moon

This artform may be best remembered for its iconic characters, but let’s not forget about the scenery. What makes this “Moonset” so cool is that it looks incredibly authentic. Yet, it also took over 250 lines of JavaScript. Worlds are colliding!

The Modern Polaroid

There’s been plenty of talk regarding just how revolutionary CSS Grid is. Developers are doing amazing things with it. And here, it was used to create a super-cool portrait that, with some animation, pops out like a Polaroid photo.

Opening Credits

Pokémon has spanned multiple generations, so it’s no surprise that there are a number of online tributes. Here, we see a pixelated-perfect recreation of the intro for the classic Red and Blue titles for Nintendo’s Game Boy. The snippet runs on pure CSS.

One Shiny Bullet

If you’ve played enough Mario games, you undoubtedly know Bullet Bill. He’s fired out of a cannon and can be easily destroyed by simply jumping on him. Why is he here? First, he’s cool. Second, it’s a neat demonstration of how pixels are used to create shading, like the shine on old Bill’s top end.

All Hail the Inventor

There are several reasons why this pixelated portrait of World Wide Web inventor Tim Berners-Lee is being featured. The first is that he is not thanked nearly enough for what he’s done. Also, this photo is reminiscent of what old stadium scoreboard displays used to look like. Photos were often dot recreations of the real thing, and had a very jagged appearance. Lastly, this SVG image was generated with the d3.js library, which is pretty amazing.

The Opposite of Now

Pixel art harkens back to a different time in history, yet it continues to stay relevant. It’s almost a rebellion against the super-high-tech creations we’re seeing all over the web. That’s a good thing, as every now and then it’s good to go in the opposite direction of everyone else.