This August I’m making a CSS drawing a day
Every year in August, Paris and its suburbs is deserted by its residents. The habitual busy pace is nowhere to be seen. While bakeries, restaurants and small shops take their annual leave, parks, museums and other touristic places are much more crowded. Locals temporarily lend the place to the tourists and the city feels so much different, quieter, more relaxed.
Even if I didn’t take my summer leave in August, the activity at the office has also sightly decelerated. I guess this makes the perfect occasion to work on some personal side projects.
I got inspired by the #100DaysOfCode challenge and decided to go with it, but for a shorter period. My goal: to code a CSS drawing or animation each day for the whole month of August.
I’m only half of it, but here what I already wanted to share.
The “blank page syndrome”.
I think making small CSS drawing and animations is a bit like doodling: it comes naturally and easily to some people but others quickly suffer from the blank page syndrome. Unfortunately, I fall on that second category.
The first couple of days, I got stuck many times thinking “what should I do now?”. I don’t want to simply copy-paste what I’ve seen elsewhere but I admit that I lack a bit in term of creativity.
Planning ahead helps a lot. Taking the time to look around me, browse the web or simply run through the apps of my smartphone gave me some ideas. And for each idea, I made sure to draw a quick draft on a small notebook.
I won’t code them all, but the more ideas, the easier it gets to find new ones.
Coding takes time.
It takes me between one and three hours to complete a module. Coding does take time. Because this is a daily project, the hardest part is to stay consistent and beat procrastination.
Here too, planning ahead helps a lot. Being able to code as soon as I get in front of my computer instead of staring at it thinking “what would be cool to do?” saved me many hours. Also, having several drafts in stock allows me to choose one accordingly to the quantity of time I’m left with.
I cheated a bit though. The days I had extra time, I would go forward and make one (or even two) module in advance. I can already predict that, on some days, I won’t be able to code at all but I really want to keep on releasing a drawing or animation a day. This obviously contradict the “be consistent” principle. I guess I just need to work a bit more on that part 😄.
Thinking out of the box.
You really need to think out of the box to find new ways of using basic CSS properties and selectors:
:before, :after, :target, box-shadow, border-radius, background. They all can be very handy to draw shapes that are not squares or rectangles.
This is also the perfect time to rediscover all the less known CSS properties: we know they exist, we also may even have used them occasionally, but we just never got the chance to go further.
We can do all kind of gradients and shapes with the CSS functions
Creating mask with
clip-path, mask, mask-border, and their functions
url(), polygon(), circle() is very convenient as it works similarly to SVG (but be careful with clipping and masking as they also affect the children of the targeted element).
Adding filters to photos (or shapes) never got easier with the CSS functions
blur(), saturate(), brightness(), contrast(), … .
And working with 3D is (almost) a piece of cake thanks to the
perspective properties and their functions
rotate(), translate(), skew(), ….
On day #3, to recreate the Instagram logo, I used 2 different gradients as background. The first one is a radial gradient that is positioned on the top left corner ; it starts with an indigo blue then slightly goes purple before going completely transparent to fade in the second gradient underneath. The second gradient is also radial but this time the heart is positioned on the bottom left corner ; it starts from a light yellow and ends with a bright pink.
Curves are hard to make in CSS.
In term of shapes, we are pretty limited when we only use CSS to draw things.
Drawing circles and ellipses is as easy as drawing squares and rectangles thanks to the
border-radius, radial-gradient(), clip-path:ellipse() and clip-path:circle() properties and functions.
Drawing triangles needs a tad more effort as you need to find the right configuration of the
border property. However, there are plenty of generators available on the web. My favorite: http://apps.eky.hk/css-triangle-generator/.
Other kind of polygons can be made with a smart mix of
border-radius properties. This demo page on CSS-trick is full of good examples : https://css-tricks.com/examples/ShapesOfCSS/.
Or you can simply use the new
clip-path:polygon() property. In that case, Bennett Feely generator “Clippy” is very handy: http://bennettfeely.com/clippy/.
Now, if you need to draw curved lines or shapes (ie. other than ellipses or moon-like shapes), that’s a whole different story. Unfortunately, there is still no “Bézier-curves” function nor “twist” transformation in CSS, and the only math function available is
calc() — unless you use a preprocessor like SASS or LESS.
Simple patterns like arched lines or moon-like shape can be done by playing with ellipses and borders. For example, on day #8, to achieve a wave effect, I used the repetition of 2 circles: one is a colored circle, the following one is a transparent circle with a solid colored shadow.
To achieve more complex curves, the easiest choice is to switch to SVG or Canvas. Otherwise, you’ll need to find a way to use all kind of circle and ellipses to build your ending shape or use
clip-path:polygon() with a lot of point to give a smooth effect.
The past two weeks, I mostly worked on drawing flat objects and adding simple movement to them. For the rest of the month, I plan to do more animations, 3D and isometric illustrations.