Creating Pixel Art with CSS
I have always enjoyed looking at and creating pixel art. Before online pixel makers were a thing, I used to spend hours making my own pixel art in Photoshop with the pencil tool. This article will show you how using CSS (and a tiny bit of HTML), you can use code to make your own pixel art creations. The Power of box-shadow While it is 100% possible to create pixel art by creating a bunch of <div>s and changing their background color, that’s a lot of <div>s to keep track of and copy if you want to reuse your pixel in multiple places. I prefer to create pixel art with a single <div>, which we can do thanks to the box-shadow property. box-shadow is commonly used to create a drop shadow effect behind an element, like in the example below. How does that help us with creating the straight-edged pixel art? By removing the blur & spread parameters from the box-shadow definition, we can straighten out the sides of the shadow. Next, we want to move the shadow so it is beside the block instead of being behind it. We can do this by adjusting the X- & Y-offset parameters according to the rules below. X-offset: Positive value moves right Negative value moves left Y-offset: Positive value moves down Negative value moves up Shadows inherit their dimensions from the element they’re applied to. To move the shadow to the right of the block, we need to set the X-offset to be the same as the width of the block: 20px. If we change the Y-offset to 0, the result looks like if we had two blocks sitting side-by-side. It’s starting to look like pixel art! But this only gives us two “pixels”, and we’re going to need a lot more than that. Thankfully, the box-shadow property isn’t limited to just one effect. By separating our effects with a comma, we can create multiple pixel-looking shadows. Now that we know how we can use box-shadow, it’s time to start making a real piece of pixel art. Creating a Pixel Cat We’re going to be creating a pixel version of Pusheen. If you’re new to making pixel art, I recommend searching for existing art so you have a reference for where your pixels should be placed. I’m going to be recreating this version of pixel Pusheen. It is made up of 414 pixels (23 columns x 18 rows). To help me easily identify the individual pixels, I’ve used Photoshop to overlay a grid on the reference image. Although you could start drawing your pixel from anywhere, I’m going to start in the uppermost left corner so I don’t have to worry about any negative offsets in my box-shadow effects. I’m also going to use SASS instead of vanilla CSS to avoid writing 414 box-shadow declarations by hand. By utilizing a custom SASS function and lists, we can automate calculating the offset positions and make our code more DRY. First, I’m going to make some modifications to our #cat block. Instead of applying the box-shadow to the block itself, I’m going to apply it to a pseudo element instead that is absolutely positioned relative to the block. Why? Because box-shadow doesn’t take up space, meaning if I were to put another element next to my cat block, it would sit on top of my shadows. If we make the size of the cat block the final size of our pixel art, we can avoid this problem, but we need the pseudo element to separately define the width/height of our pixels (remember, the size…
Like to keep reading?
This article first appeared on dev.to. If you'd like to keep reading, follow the white rabbit.