Taking on the Daily CSS Images challenge post image

Taking on the Daily CSS Images challenge

Posted on:

A few weeks ago I signed up to the Daily CSS Images challenge to give myself some motivation to learn more CSS.

It’s been really good fun so far and I’ve created some I’m really proud of and learned some new techniques along the way. It’s been great fun thinking about how images can be created and also putting some Sass techniques into practice.

Here are some of the things I’ve learned and used so far –

Box Shadow
This isn’t something new to me, it’s just something that I’ve found a totally new way of using. Box-shadow is great for adding more depth to your images without having to add new HTML.

This is something I had never used before and I’ve found really handy for repeating patterns or colouring in blocks. I always think of gradients as well gradients, but with linear-gradients you can set it up so that the colour change is instant, meaning you can draw for example stripes really easily.

Sass for loops
This is something I knew about but had never used in a real project. It allows you to loop through HTML divs and style them slightly different if needed. For example a ruler, I could draw out each of the measurement lines in HTML then use a Sass for loop to evenly position them apart. So handy!

Here are some of my creations so far and you can view them all here.

CodePen examples