Pixel Art without images

Beside casual Web Development and styling CSS can give you a lot of Fun - even to calm down after a hard day or simply to try something new.
CSS Pixel Art is one of those things.

I'll tell you how it is possible to create single element 8-Bit/Pixel Graphics with pure CSS.
Note: I use SCSS for color Variables. You can read more about the SCSS and SASS pre-processor here.

The Basics of CSS Pixel Art

Those examples belong to Link from The Legend of Zelda I made. The Tutorial will give you an inside view on how to deal with CSS Pixel Art. You'll find a link to the finished version at the end of this tutorial.

The HTML

First of all we'll set up our HTML.

<div class="link"></div>

That's it, we only need one div. Everything else is done with CSS.

The power of CSS

Let's start with some SCSS Vars to store colors.

$cap-green        :   rgb(81,108,53);
$border-green   :   rgb(40,56,27);
$hair-light          :   rgb(255,238,69);
$hair-dark          :   rgb(189,166,54);
$skin                  :   rgb(187,176,130);
$skin-darker      :   darken(rgb(187,176,130),5%);

Some word about SCSS

If you're not familiar to SCSS let me explain a bit. The color Values are now stored in variables and can be used everywhere around the CSS Document. If I decide to change a color later I simply change the value of the variable and it will be changed everywhere in the document.

You'll also need to save your document as *.scss file and process it via command line by navigating to your file and typing sass --watch my_scss_sheet_name.scss:style.css
SASS (or SCSS, it's basically the same) will now watch your files and will process it to style.css everytime you save it.

The link-class

.link {
   width:25px;
   height:25px;
   background:$cap-green;
}

The basic setup is done but let me explain a bit how those 3 attributes effect our Pixel Art.

The width and height attribute define how large every pixel of our Drawing will be. The background attribute defines the color of our first pixel which is also the starting point from where we'll draw all other pixels. You can mark it in an color that doesn't appear in your drawing while editing your work. This may helps you keeping overview.

The magical box-shadow(s)

Every pixel of our Pixel Artwork is a box-shadow. It's pretty easy to create Pixel Arts with box-shadows when you worked around with it for some time. I'll tell you about the basics now.

box-shadow: 25px 0 0 $cap-green; 

The example above would create a box-shadow that is 25px moved to the right from our starting class link. Below you see an example.

The box-shadow syntax is very easy.

box-shadow: 1 2 3 #000;
/* 
1 value = offset to the right
2 value = offset to the bottom
3 value = blur 
#000 = any color value (can be rgb, hex or anything else)
*/

So alright we have a Element and one shadow, but that's a crappy Pixel Art isn't it? Yes and there comes multiple box-shadows!

You can apply as many box-shadows as you wish to draw as many pixels as you need. simpyl comma separate them.

box-shadow: 25px 0 0 #000,
0 25px 0 orange,
50px 0 0 blue;

With this basic knowledge about CSS Pixel Art you can craft your own Pixels Artworks now. You can see the finished Link from The Legend of Zelda here .

I can recommend you to use CodePen for tryouts (it also supports SCSS,SASS,LESS for CSS and HAML,SLIM, Markdown for HTML).

Feel free to post your works based on this little Tutorial in the comments or say hi on Twitter.