When it comes to drawing, what’s the first thing you do? Fire up your computer or laptop and launch your program of choice? Or do you go the more traditional route and reach for pen(cil) and paper?
For me, I’d have to say it’s a little bit of both. I like to have a rough layout of my design before I begin, and for that, I usually make a quick sketch with a pen and whatever paper is available. Then I’ll launch Illustrator and begin filling things in.
I never once would have considered using code.
Having worked as a graphic designer in marketing, I’ve designed all manner of print material and web banners. I always assumed it was the designers who made the graphics and the web developers who figured out how to make it work when coding a site. Yet having started to learn HTML and CSS, one of the neatest tricks I’ve found is drawing with CSS.
Yep. Drawing. With code. It kind of makes sense when you think about it, because what are those fancy design programs except lines and lines of code?
There are many tutorials on this subject, but most will have you use the div tag paired with a class attribute. If you’re not familiar with classes, reading up on them or finding a good video tutorial is a must as some of this code can easily get unwieldy, especially when working with multi-layered objects.
I’m including some of the more interesting posts and tutorials I found about drawing with CSS below, so have fun and experiment!
Make Shapes with CSS A simple tutorial going over some basic shapes with easy to follow code.
Single Div Drawings with CSS A note of caution with this one. It uses CSS pseudo-class selectors, which are used to select elements based on attribute, state, or position — an example would be a:hover.
Pure CSS Drawings A gallery of stuff people have drawn with CSS.
https://css-tricks.com/examples/ShapesOfCSS/ Nothing but straight up code for simple shapes drawn in CSS. This one uses the id class attribute in HTML.
How I started Drawing CSS Images Some nice flat design illustrations made with CSS as part of the Codevember challenge.