A beginner’s guide to pure CSS images

We will start with an overview and work our way to create a Koala in pure CSS.

There’s also a video you can watch as well as the written instructions.



  • JohnDoey

    There is no such thing as “pure CSS.” There is only the DOM. You can modify the DOM before the application loads by using CSS or HTML, and you can modify the DOM after the application loads by using JavaScript. Period. You choose CSS if modifying before and you choose JavaScript if modifying after. There is no purity test of any kind. The DOM is all you are making, nothing else.

    Further, if you want to make a graphic, use Scalable Vector Graphics, not CSS. Not only is SVG the correct semantic choice for your graphic, but it also has infinitely more shapes than CSS and 1000 times the layout precision. And most importantly, SVG has hundreds of drawing tools so you can either draw a Koala or dress up a clip art Koala in 5 minutes.

    I know this pure CSS thing is a kind of Rubik’s Cube puzzle that people do to avoid spending the 80 hours it takes to learn JavaScript, but if you are also going to use it to avoid SVG, really you should just switch to making documents in Word. You can’t be trusted with a set of Web tools if you are going to be knocking nails in with a wrench all the time.

    The main problem is that you keep giving people the idea that there is nobility in their ignorance of JavaScript. Then i interview them for a job and they say “pure CSS” and I have to show them the door.

    “DOM Scripting” by Jeremy Keith is like 150 pages and teaches you 95% of the JavaScript that you will ever need in Web publishing. There is no excuse for this pure CSS crap.

    • Rageous

      JavaScript can be a popular tool for browser abuse, which is why the more paranoid among us create an https://* exception flag. It’s not a knock on JavaScript specifically, but pure CSS in some contexts is desirable for graceful degrading — particularly in cases where people load up tons of JS frameworks solely for excessive visual effects that could be redundant with a little more effort put into the initial CSS.