loading...
Cover image for 5 lessons from 50 days of CSS art

5 lessons from 50 days of CSS art

s_aitchison profile image Suzanne Aitchison (she/her) ・4 min read

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:

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 👋🎉🎈

Discussion

pic
Editor guide
Collapse
gdebojyoti profile image
Debojyoti Ghosh

Wow! Great work!!
Loved the ants one.. 🐜🐜🐜 and the ice cream one too.. 🍦
All of them were great, of course! 😊😊😊

Here's one of mine - debojyotighosh.com/xp/amusement-park/

😊😊😊

Collapse
pzxdld profile image
Bob'l apps

I. Am. Not. Worthy. ;)

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Oh wow - this is incredible! I'm really impressed - this is so beautiful 😍 Now I'm feeling inspired to do some amusement park themed images!

Collapse
jlohani profile image
Jayant Lohani

You took the 50-day challenge to a whole different level. When I first read your article 50 days ago, I wasn't expecting such amazing artworks to be honest. I still couldn't believe that such arts are made using CSS. I am devastated that I didn't pay attention to CSS a while back ago. Going to pay more attention to the CSS part from now on. I am truly a fan of your work. Looking forward to the second half of the project. All the best.✌

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Thank you so much that is such a kind thing to say!

I have to be honest that every day has been a learning curve, my normal frontend job doesn't require a lot of this!

Having a project like this has really spurred me on to learn - it's a lot more fun for me to have an idea of something I want to make, and then figure out how to make it. It gives a lot of satisfaction when it's done!

Definitely growing my appreciation for CSS 😊

Collapse
abhayswee2 profile image
abhay tripathi

Hi Suzanne,
There are many devs who are taking similar challenges and coming up with great work. But what I like the most about yours is the simplicity. You came up with little everyday things and than tried to implement it in simplest form. Great job. Inspiring. Keep moving forward.

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Thank you! Yes totally, part of why I wanted to do this challenge was to have a bit of regular coding that is purely for fun, so keeping it simple, bright and breezy is definitely key 😀

Collapse
ideepakmathur profile image
Deepak Mathur

That's mind blowing work, willing to learn and try.

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Thank you so much! Definitely give it a go if you fancy it - honestly I'm surprised how quickly you can build strategies for creating and placing certain shapes.

CodePen is chock full of inspiration too - let me know if you do give it a go, I'd love to follow your work!

Collapse
iammichello_ profile image
Michello

Do I need this skills too..
Or I can go with my normal CSS skills.

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

For me I think this kind of CSS is just for fun 🌈

Collapse
iammichello_ profile image
Michello

Ok
Thanks very much

Collapse
damcosset profile image
Damien Cosset

CSS can do that???

What is this black magic? I can barely align two divs...

That's just so cool 😄

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Hahaha thank you so much! The magical power of CSS ✨

Collapse
pzxdld profile image
Bob'l apps

I'm a fairly inexperienced web developer (it's mostly a hobby - I have yet to land gigs doing it to make money). I need to take on some challenges like this to push myself. I'm amazed at these creations and had no idea CSS itself could be so powerful! Thank you for sharing this. :)

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Thank you so much! I had so much fun with this challenge - definitely recommend finding some coding "just for fun" like this if you do have time 😊 sometimes we put so much pressure on pushing ourselves and forget that we can also just take some time to see what weird things we can make CSS do 😂

Collapse
ja profile image
Joe Ashwell

These are so cool! The ants are genius.

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Thank you so much! I absolutely love ants so was really excited to do that one 😁

Collapse
ujalak1812 profile image
Ujala Khurram

All your images are amazing 🤩 You are doing a great job 🤗

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Thank you so much! Some attempts go better than others 😂

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

What a wonderful stuff you made!! I really like those ants... 🐜 😂

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Thank you so much! I really enjoyed the ants one! 🐜🐜🐜

Collapse
petetrickey profile image
petetrickey

Thanks for sharing this. I've been thinking about trying my hand at CSS art, these are some great pointers to get started.

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Amazing! Glad it can maybe help - would love to see what you end up making!

Collapse
nandhusathish profile image
nandhu_sathish

Wow really cool!

Collapse
s_aitchison profile image
Collapse
dselasea profile image
Daniel Selase

How do I start?

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

If you already know a little CSS I'd say just pick a few shapes and have some fun trying to create them in a CodePen!

It can also be fun to look through other people's CodePens and try to recreate them, checking on their code if you get stuck!

If you need to brush up your CSS fundamentals first, maybe somewhere like Codecademy would be a great place to refresh.

Collapse
pika1998 profile image
Collapse
s_aitchison profile image
Collapse
iamsbharti profile image
Iamsbharti

Cool ,I am in this

Collapse
julieplummer20 profile image
Julie Plummer

Wow - looks great, and the code looks doable too!
Thanks

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Definitely doable! A lot of can be achieved by making divs into circles and squares and placing them next to each other really 😁

Collapse
nwaforsopuru profile image
Nwafor Sopuru

Wow! so cool! You are a css genius
All this you were able to learn and achieve in 50 days
Great job!

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Thank you so much ♥️ can't wait to see what the next 50 days hold! 😅

Collapse
madza profile image
Madza

What's your preferred CSS method for layouts? Like Grid, Flexbox, etc..

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

In my job I use flexbox and grid mostly, but for this project I've relied quite heavily on absolute positioning. Mostly because in creating an image like this, 9 times out of 10 (9 divs out of 10 haha) an element really does have a fixed position in relation to something else. Which isn't the case very often at all for building sites and apps!

A lot of my efforts so far aren't responsive at all (mostly due to me 'learning on the go' and the time constraints for pushing a piece out daily), but even when making responsive I'd still use absolute positioning a lot, just with more % values and attention to scale.

It does depend on the image though. If I need to line up a row of things, for example, I'd still use flexbox.

Collapse
jmnyarega profile image
Josiah Mokobo

Amazing

Collapse
maskedman99 profile image
Rohit Prasad

Nice. Why CSS over SVG ?

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Just for the challenge! Definitely planning to get more into SVG after the challenge is over.

It seems to me SVG is more practical for professional use-cases, but I wanted to play with some CSS 😁