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.
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:
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 .
Note: Proper commenting is helpful to keep track of each line of the design.
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:
Note: Feel free to look through the code to see how it’s accomplished.
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?