CSS can be a surprisingly powerful illustration tool. Here’s a quick overview of how we've used it in a recent project.
This week at We Make Awesome Sh, we launched a fun internal project called Don’t Touch My Face. It’s simply a website that shows someones face. If you click on the face, it makes aggressive noises. You can see the finished project right here. You could even call it an experiment on human behaviour.
When I first started the project, I was thinking about how it might look and the kind of illustration style that could be used. After a bit of playing around I decided not to use any images or faff around in Photoshop, but instead dive straight into CSS.
Using CSS to illustrate is a lot of fun. Especially when you combine some simple CSS3 awesomeness. It’s nothing new, it’s nothing complicated, but it sure is enjoyable and it can produce some neat results.
Here’s an example by @paranoida who created these CSS3 animals:
Scalable & easy to tweak
Illustrating in CSS lends itself nicely to a vector style. You can produce easy to scale graphics with zero loss of quality. Couple that with the web inspector, and it’s really easy to tweak things and get it looking just right. Also, you can animate the illustrations. Admiteldy I left this part to our developers @nrocy and @sydlawrence!
Don't Touch My Face uses a whole range of different CSS3 properties. Things like border radius, box shadows and background gradients. None of these are anything new or special. But combined, they make for a very nice illustration tool, right in the browser.
How to draw a face in CSS
It’s fun to push things a little and use CSS in ways you might not normally. Here's a few interesting examples we discovered...
The finger nail
The finger nail is made from three box shadows. It sounds silly, but I didn’t realise it is possible to add multiple box shadows to one property by separating them with a comma. Here's an extract from the code:
0px 5px 30px 0 #fff, inset 0px 5px 0px 0 #fff, inset 0 -5px 3px 0 rgba(194, 137, 92, 1);
The hair strands also use the box shadow property. Each div has 50% border radius with an inset box shadow. For example:
box-shadow: inset -70px 0 0 0 #1a1a1a;
The eye is simply several divs with 50% border radius overlaid on top of each other with appropriate background colours. The white circle highlights have a bit of opacity just to add some depth.
Have a go!
So why not have a go at using CSS to create an illustration? I’d love to see what you can make with some fairly basic code and a sprinkling of imagination.
Update: We've spotted a few people having their own fun with our face. Here's a great remix we found by @komiska: