The fox excitedly points towards a robin! The bird informs him that he's not a robin, he's a bluebird. The fox looks ashamed and says he's colour blind.

So, I’ve been chugging away with my experimental “CSS illustration as comic” project for a while now, and posting .png outputs of the results on Today there is a new character, who is definitely not a robin.

At this point I have prepared about five pretty sturdy characters, (fox, rabbit, bluebird, wolf and bear), with a variety of modular facial expressions and postures. Creating a new panel without any new content only takes about half an hour or so, which is pretty handy. Scaling is lovely and clean, and every time I add a new element, it can be stashed away for reuse later, saving more time in the future.

If you’d like to play around with the CSS on this page, here it is on jsbin:,output. It’s pretty scruffy and not cross-browser compatible right now, so consider yourself warned.

Well, hello!

“Well, hello!” in hot pink and candy colours, styled by CSS

Just how far can we push CSS styling on text? Pretty bleedin’ far these days.

This is an experiment in CSS typography. Live version here »

The text is fully select-able, copy-paste-able, and accessible. Many of the effects are hung on spans, of which there are over a dozen, so semantically speaking, it’s a bit naughty. If the characters weren’t different shades I could have gotten away with a lot less span spam.

The letters are squeezed together with a bit of negative letter-spacing, and this has the odd effect of clipping the text-shadow in pretty much everything except Chrome. IE9 is not equipped to deal with text shadows, which lessens the impact a lot.