CodePen

New Pen

Something from Nothing: How to use Box-Shadow to simulate an 8-bit pixel-style figure

I've seen a lot of CodePen pens and other demoes achieving a pixelated look, using a single HTML element to create an entire--sometimes very detailed--figure, without the use of images, icons, SVG, or canvas. I wanted to learn how to do that, so I started looking into it. To practice that and other techniques, I created the pen below (click here if it's too small). I am planning related posts to discuss the CSS animations used in that pen, as well as the use of the general sibling CSS selector to control the action without the use of JavaScript. Today's post will focus on creating 8-bit goodness out of thin air.