And by that, it’s usually some kind of CSS experiment, often an elaborate drawing or interaction.
For example, have you seen Lynn Fisher’s extraordinary A Single Div project? Not only are all these graphics drawn in just HTML and CSS, they are all created with (you guessed it) a single <div>.
Why would she do that? Here’s one pertinent possibility: it’s none of our business. We’re free to wonder, or even ask if it’s done respectfully enough. But does it really matter? Let’s stop short of assuming she doesn’t know what’s she’s doing, assuming it’s a twisted form of pain, or that she’s unaware of other technologies. Check out the example where she drew the official SVG logo with CSS and a single div. Woke.
I even kinda get it. I wrote a whole book about SVG because I think it’s underused. Are there “CSS drawings” that I think would be better as SVG for a production site meant to last? Sure.
How about this one?
Jeepers creepers that’s something else. I would have guessed GreenSock was behind this at a quick glance. Speaking of, GreenSock has advocated right here on CSS-Tricks some techniques for smart animations. Part of that is breaking animations into parts and stitching them together into larger timelines for maintenance ease and “without getting bogged down by the process.”
So, did Julia Muzafarova do it wrong? Of course not. If there is a wrong way to animate a cartoon hipster on a bike in this world, I don’t wanna live here anymore. It’s 2,100 lines of meticulous positioning, coloring, and animating. Heck, it’ll work in some email clients if you really need to latch onto something “practical.”
Sasha Tran, a UI Developer at Level Studios, shared her story of creating drawings in CSS last year. She drew something new every day for 20 days during Codevember.
Even if I am not talented in hand illustrations, there is a way to express myself through other mediums. I found that medium to be in HTML and CSS. To level up and get to a point where I could create cute artwork, I focused on two things: the basics, and consistency. Working with basic CSS shapes like rectangles and basic properties like border-radius overtime gave me the muscle memory to progress into more intricate illustrations.
Significantly leveled up in a month and developed better CSS muscle memory. Huh. Speaking of shapes, there are plenty of ways to get tricky with those in CSS!
You could argue that pushing boundaries toward the impractical is what hones our skills for all that other work we have to do.
You could argue that forcing yourself into restrictions is fuel for creativity.
You could argue that stretching your brain creatively in these forced conditions helps build your confidence and widens your toolbox.
You could argue that it’s just kinda fun.
Love this. Each of these people have inspired me in the past. They all have beautiful work. I get asked all the time why I do it. ¯_(ツ)_/¯ It’s fun. And if anyone needs a practical reason… I’ve received jobs because of my crazy CSS work :)
Great post, Chris!
I used to rant about this sort of thing a lot, until an exchange with Lynn Fisher made me realize that I wasn’t taking the work’s context or process into consideration. It’s one thing to advise an organization on a technology that will be maintainable, performant and accessible within a product or design system. It’s quite another to tell artists how they should be making their art.
Recognizing that (as Lynn said) “the medium and the process are part of the work” has helped me rediscover that I can appreciate the work and I can wish to see more fun experiments happening with SVG, and those two thoughts are not necessarily related or contradictory.
Great article, I loved the use of box-shadow to draw hellboy lol
This is a fantastic article. I’ve been trying to learn CSS recently and I’ve been loving your page and the weekly emails I get from Codepen. But, coming from a graphic design background, I kept seeing these amazing projects with CSS and thinking, “why would I do it this way when I could do it in an art app?”
And then I wondered if doing something impractical to accomplish a goal was the whole purpose in itself. It made me think back to when I started learning Illustrator, back in 2002 when Flash was still huge. Everything vector I saw was a cartoon and for some reason I decided I was going to learn to do realistic drawing with the tool instead. There were much better and more practical ways to do it, but I found the challenge to be amazingly satisfying.
So it was a comfort to see this article and have my internal questions answered.
While it’s entirely impractical, it can be incredibly fun and rewarding to do things like this. I too have done some similar things including a single div Mona List for which I wrote a PHP CLI script to generate the thing from any image (http://www.ashleysheridan.co.uk/blog/Single+Div+CSS+Mona+Lisa ) and a build-a-burger in pure SVG and CSS (http://www.ashleysheridan.co.uk/blog/Interactive+Burger+Menu+with+SVG%2C+CSS+and+no+JavaScript%21 )
Even though I think you should never do anything like this for production websites (it’s not exactly maintainable code, and often creates much larger files) but it helps really push your skills, and you find yourself using techniques and little bits you’ve learned along the way to do something that is production quality.