5 lessons from 50 days of CSS art

50 days ago I started out on my project for 100 Days Project Scotland - to create a piece of CSS art every day for 100 days. I wrote about my motivations here:

Join Me for 100 Days of Pure CSS

Suzanne Aitchison ・ May 16 '20 ・ 2 min read

#css #html #webdev #codepen

I hadn't really tackled any CSS art before this project, and it's been a fun journey to date! Today marks the halfway point, and I thought I'd share an update on what I've learned so far.

My top 5 learnings so far

1. Simple is often most effective

Throughout the last 50 days I've spent a varying amount of time and effort on each creation, and some days I've gotten really carried away with complex shapes, animations, and so on.

But - some of my most popular creations to date have been the simplest. Like this sheep, which is pretty much made of two colours, and a lot of circles!

So my advice to anyone else getting started with CSS art would be to focus on pictures you can make with a few basic shapes, and keep your colour palette as minimal as possible, as it can help the image look more striking.

2. Clip-path is very, very useful

Before I started this project I'd never had a need to use the CSS property clip-path. I'm not even sure I'd heard of it!

Clip-path allows you to define a shape that will determine what parts of your HTML element are shown. You can use it to create all different kinds of shapes! Check out the MDN web docs for clip-path.

Even better, there's a great tool for creating these shapes in a handy UI - Clippy. I've used this tool a whole lot in the last 50 days 😄

For example, I used it to create some random leaf shapes for my leafcutter ants to carry:

3. Gradients can be a time-saver (and a div-saver)

Quite often I've found that I need either stripes, or several neighbouring blocks of different colour. Until I started this project I hadn't fully appreciated how far CSS gradients can get you in this respect, especially with the ability to add fixed stops in a gradient to create hard stripes, rather than colours gently fading from one to another.

For example, I used a linear-gradient with some very gentle grading to create both the tail and wing stripes for this parrot:

And a repeating-linear-gradient to repeat a bunch of stripes in opposite directions on this ice cream cone:

4. CSS variables are scope-able and very helpful

I'd used CSS variables before, and immediately employed them in this project as it makes life so much easier to be able to e.g. edit all your colours in one place, defining/using like so:

:root {
  --ice-cream-color: #FCB8C3;
  --ripple-color: #FC889B;
  --cone-color: #F7C077;
  --waffle-color: #F3A63A;
}

.scoop {
  background: var(--ice-cream-color);
}

I usually have the same colour used in a few places in the picture, and being able to change it in one place is such a huge benefit 🙏

Something I hadn't really done with CSS variables before though was using them in a scoped fashion. Instead of declaring a variable value in the :root like above, you can declare them within a CSS certain selector and they'll be applied within that scope.

For example, in this cogs animation, the three cogs share a class which defines the majority of their appearance and behaviour. To make them slightly different sizes and colours, I used scoped CSS variables e.g.

.cog-one {
  --cog-color: #898888;
  --cog-outer-size: 50px;
}

.cog-two {
  --cog-color: #A16036;
  --cog-outer-size: 40px;
}

.cog {
  border: var(--cog-outer-size) solid var(--cog-color);
}

5. Inspiration can come from the mundane

A big part of the challenge especially initially was trying to think what on earth to make. It had to be simple enough that I could actually do it within a reasonable time frame, but also interesting enough to be enjoyable and hopefully a bit eye-catching.

And it turns out that some of the most boring things have been the most enjoyable to code and share 😄 So far my creations have included pretty banal stuff like my washing machine, a mug of tea, a cup of coffee, and a toaster:

Fancy joining me?

I'm looking forward to the second half of the project, and if you feel inspired to try some CSS art I'd love to follow you too!

You can connect with me and follow my creations on my CodePen profile, or on my Twitter.

I've found CodePen, like DEV, to be a really supportive community and I've been given a lot of encouragement and motivation there. Hopefully if you decide to a give it a go too, you'll find the same!

Hope to see you there, and for now I'll leave you with my day 50 creation - some celebratory balloons 👋🎉🎈