Suck at something September
A few years ago when I was on maternity leave with my second child, I decided to do a bit of a deep dive into the world of CSS art, which is a strange and magical niche filled with some very talented people.
At the time, I blogged about it and shared some of my creations on dev.to; you can see my old posts if you want.
- Playing with CSS animation in 30 minute increments
- CSS Variables, input[type="color"], and form animations
- More experiments with form animations
I was certainly not the greatest at it but it was kind of fun and something different.
More recently I saw this challenge: Suck at something September and I thought… hmm, maybe I can try my hand at this again, this time more along the lines of using gradients to draw, like at cssdrawings.com or a.singlediv.com
Getting to the quality bar of the two websites I just shared is probably totally impossible for me. I suck even at drawing things by hand. Manipulating gradients to bend to your will seems infinitely harder than that. But that is the spirit of suck at something September- sucking is kind of the goal! It encourages you to just play around and try something without feeling ashamed of how crap it might be.
So this month I will try out drawing things and see how far I can get. You can see my first attempt for the month below. Starting with some happy/sad faces because it's very circle-based art and doesn't require any complex shapes.
Here's what makes these drawings tricky: You use 1 div, and then you use a complex background image of layered gradients to draw it out. There's a detailed article on css-tricks.com of how this is done if you are curious/want to try for yourself.
See the Pen Attempting drawing pictures using gradients by Rose (@roseyrobertson) on CodePen.
We’ll have to see if I improve with practice over the course of the month, or if I run out of free time and do nothing… or if I practice a bunch and still suck to be determined!