Fun Times With CSS Pixel Art

Pixel art is one of those lost art forms that have been overshadowed by super crisp, high resolutions images. I stumbled on some pixel art while surfing around CodePen and it reminded me how awesome it is.

See the Pen Pikachu pixel css by Devi Krisdiansyah (@agilBAKA) on CodePen.

How cool is that?! There’s something about pixelated graphics that adds a layer of simplicity and friendliness that can get lost in high definition images and illustrations.

It’s also a great example of how we can create pixel art using HTML and CSS. Let’s break this concept down and create a pattern we can use in other instances.

Create a Grid

First things first. We need a canvas to paint our pixelated masterpiece. This is really a grid that we can create a couple of different ways.

One way would be a standard HTML <table> that contains a bunch of fixed-width cells in each row. For example, let’s say we draw a perfectly square table that is eight columns wide and eight rows deep. If we make each cell 10 pixels square, then we have a table that is 80px wide and tall:

See the Pen CSS Pixels – Table Grid Example by Geoff Graham (@geoffgraham) on CodePen.

Want a larger canvas? Give the cells a larger dimension. Want to double the resolution? Double the number of cells in each table row.

The other way to set up a grid is to ditch the table and replace it with two divs: one that acts as the container for our canvas and another that will can be repeated as many times as we want to represent each pixel in the canvas.

<div class="canvas">
  <div class="pixel"></div>
  <!-- Repeat as many times as needed -->
</div><!-- end .canvas -->

The trick here is knowing exactly how many pixels to create. For that, we can multiply the number of pixels wide by the number of pixels tall. For example, if we create the same 80px square grid as the table method and want a grid that is 8 pixels wide by 8 pixels tall, then we can multiply those for a grand total of 64 pixels.

.canvas {
  /* Perfectly square */
  width: 80px;
  height: 80px;
}

.pixel {
  /* We'll need 64 total pixels in our HTML */
  width: 10px;
  height: 10px;
  float: left;
}

See the Pen CSS Pixels – Div Example by Geoff Graham (@geoffgraham) on CodePen.

What I like about this method is that it is truer to the canvas dimensions we define. I also find it easier to not have to work with the extra HTML markup that comes with table.

If we want more pixels to create a more detailed pattern, then we can quadruple the number of pixels in our HTML markup and cut the size of our pixels in half. This is kind of like making an image in Photoshop that is twice the size of the dimensions you plan to use on the page to create a higher resolution.

.canvas {
  /* Perfectly square */
  width: 80px;
  height: 80px;
}

.pixel {
  /* We'll need 256 total pixels in our HTML */
  width: 5px;
  height: 5px;
  float: left;
}

Start Painting

This is where the rubber meets the road in the sense that we add color to our pixels. We can use the nth-child attribute to select specific pixels in the grid.

/* The third cell in our grid */
.pixel:nth-child(3) {
  background: orange;
}

As you can imagine, this list will get very long very quickly depending on the number of cells in the grid and the how much detail the design requires. The opening example in this post uses 1,920 total pixels in the grid and more than 300 different child selectors. Phew!

A Simple Example

I decided to make a pixelated self portrait. It’s pretty simple since I went with very few pixels and only four total colors.

See the Pen CSS Pixels – Self Portrait by Geoff Graham (@geoffgraham) on CodePen.

CSS Pixel Art as an Icon

Now that we have something to work with, we can use the transform property to scale our artwork down and use it like an icon:

See the Pen CSS Pixels – Self Portrait – Icon by Geoff Graham (@geoffgraham) on CodePen.

Other Pixel Drawing Techniques

box-shadow

You can draw pixel art within a single element by using a big complicated box-shadow! If you declare a vertical and horizontal offset for the box-shadow, but not a blur or spread radius, you’ll get a clean colorized copy of the shape of the element to move around.

Here’s the concept. The black “pixel” is the original, and I’ve created an orange pixel to the bottom left and a red pixel to the bottom right.

See the Pen Basics of Pixel Art by Chris Coyier (@chriscoyier) on CodePen.

You could go hog-wild with that and do entire drawings.

See the Pen Pixel Hellboy by servin (@servinlp) on CodePen.

Preprocessing

Variables could help make it easier to adjust colors and sizing and such. Here’s an example in Less:

See the Pen Pixel-art hipster pacwoman by Mario Sanz (@msanz) on CodePen.

Here’s an example by Una Kravets that takes it a step further in creating the box shadow with a Sass map, which is pretty darn clever:

// Setting the colors we're syncing up with
$pixel-color-map: (
  'r' : #f00,
  'w': #fff,
  'k': #000,
  'o': transparent,
  't': #83401f,
  'p': #ffbc77,
  'b': #06f,
  'y': #ff0,
  'n': #ff8000,
  'g': #5ac528
);

// Mario pixel art matrices!
$pixel-art:(
  mushroom: (
    (o o o o o k k k k k k o o o o o)
    (o o o k k r r r r w w k k o o o)
    (o o k w w r r r r w w w w k o o)
    (o k w w r r r r r r w w w w k o)
    (o k w r r w w w w r r w w w k o)
    (k r r r w w w w w w r r r r r k)
    (k r r r w w w w w w r r w w r k)
    (k w r r w w w w w w r w w w w k)
    (k w w r r w w w w r r w w w w k)
    (k w w r r r r r r r r r w w r k)
    (k w r r k k k k k k k k r r r k)
    (o k k k w w k w w k w w k k k o)
    (o o k w w w k w w k w w w k o o)
    (o o k w w w w w w w w w w k o o)
    (o o o k w w w w w w w w k o o o)
    (o o o o k k k k k k k k o o o o)
  )
);

There are a few more functions in there to convert that into the box-shadow and apply it. Here’s the final result:

See the Pen Sass-Generated Box Shadow Pixel Art! by Una Kravets (@una) on CodePen.

Remember box-shadow can be animated too!

See the Pen Ash and Pikachu box-shadow Pixel Art by Andrew (@AstroDroid) on CodePen.

Canvas

The <canvas> APIs can certainly draw rectangles!

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
  
ctx.fillStyle = "rgb(53, 41, 15)";
ctx.fillRect(48, 0, 8, 8);
ctx.fillStyle = "rgb(238, 187, 68)";
ctx.fillRect(56, 0, 8, 8);

See the Pen Canvas Ark from Terranigma by Max (@MyXoToD) on CodePen.

SVG

An of course <svg> has <rect>. But you could even cheat a little and make <polygon>s that combine multiple pixels.

See the Pen Pixel me by Aloïs De Schepper (@Alo62) on CodePen.

3D!

Ok I think we’ve done enough here.

See the Pen 3D Pixel Art by cx20 (@cx20) on CodePen.

It’s Your Turn!

We’re always a fan of you doing things your own way, but know there are some tools already out there for drawing with pixels:

• Ludvig Lindblom’s Canvas box-shadow pixel art generator
• Jenn Schiffer’s make 8-bit art!
• XOXCO’s Make Pixel Art
• Javier Valencia’s Pixel Art to CSS Generator

Have you created CSS pixel art that you’d be willing to share? I created a collection in CodePen, but please post your examples in the comments below so we can bask in the awesomeness.