Designing Characters with Box Shadow

in Front-end

While creating the design for our upcoming JavaScript Best Practices course, our art director, Justin Mezzell, created an awesome 8-bit narrative to guide you through the course. He created an extensive world, pixel by pixel, and introduced us to the heroic characters Dhuun and Aiedra. These characters begged to be animated, so just like any front-end developer would do, I recreated the characters using only CSS—specifically box-shadow.

image

Inspiration

I’m not the first to attempt this technique. Alex Griendling recently created an 8-bit Rocket Racoon, and Favrice LeJeune recreated the design using this box-shadow technique. Being a curious front-end developer, I had to try it with Justin’s characters.

Flexible Sizing

First, you may notice that I used ems instead of pixels. Fellow Code School front-end developer Dan Denney pointed out that this method would allow the size of the design to be easily adjusted. This is because ems are calculated relative to the current font size, so in this instance, a simple change to the body font size would alter the size of our character. This is the setup for that:

image

Building with Pixels

Next, I picked a random point (pixel) close to the center of the design, and started building out each line of the character one by one, using comma-delimited box-shadows. To give you an idea of how this looks, here is the first line of Aiedra .

See the Pen Aiedra - First Line by Jordan Wade (@jordanwade) on CodePen.

Note: Proper commenting is helpful to keep track of each line of the design.

Keyframe Animation

After the setup and line-by-line 8-biting, it was time to start the animating. The difficult part of the animation was getting the boxes to flicker without a transition to give a more classic, 8-bit-style animation. I had a feeling the solution was using steps, and, after some guesswork, I discovered that setting steps to “1” fixed the issue. Unfortunately, like a lot of things we do, it works for an unknown reason that was only uncovered by tinkering with numbers to get it right.

Here are the two finished characters:

See the Pen Aiedra by Jordan Wade (@jordanwade) on CodePen.

See the Pen Dhuun by Jordan Wade (@jordanwade) on CodePen.

Note: Feel free to look through the code to see how it’s accomplished.

Why?

So why would I go through the trouble of creating each pixel individually, when I could have easily made a sprite or used Justin’s GIF? Well, in this case, for fun. I had some extra time on this course, so why not try something different and challenge myself to keep learning?

I hope you enjoyed this quick look at some of the techniques we’re using at Code School. Don’t forget to follow Dhuun and Aiedra on their journey in our upcoming course, JavaScript Best Practices.

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Jordan Wade

A Front-end Developer who started as a carpenter on a Amish construction crew. He traded in his tool belt for all things web design and development related.

Might We Suggest