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.
First of all we'll set up our HTML.
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 basic setup is done but let me explain a bit how those 3 attributes effect our Pixel Art.
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.