A couple of weeks ago I started the Daily CSS Image. If you are not familiar with the challenge, it is a person challenge, not a competition. Each weekday an email is sent with a topic or object to create using only CSS, with the needed HTML. To participate the community aspect of the challenge the image should be created in CodePen and shared with the hashtag #dailycssimages on Twitter. The challenge is run by Coding Artist and they just started a Daily SVG Image challenge I hope to start once I’m done with all 50 days CSS challenge.

On my own I’ve done several CSS images, so with the challenge I decided I wanted to add an extra challenge—use a single element if possible. I was able to do that up until day five, but picked it up in week two…until day 10. So far the last day of each week tends to be a more complex topic and to do what I want visually I set aside that challenge.

Week One

Week one of the challenge focused on animals.

Day One: Bear Cub

This was so much fun to make. I know it was only the first day, but to kick it off iw

See the Pen Day 1: Bear Cub on CodePen.

Day Two: Elephant

Alright. This is bad. It looks, well…yeah. But hey, single element!

See the Pen Day 2: Elephant on CodePen.

Day Three: Beaver

The first thing idea I had with this one was the teeth and that it would have to be a pseudo to make the teeth work right. I love how well the teeth came together.

See the Pen Day 3: Beaver on CodePen.

Day Four: Tiger

I had a vision of these green eyes as soon as I read the topic for this day. I figured I would have to do so much more work for the stripes, but the way this came together, the stripes were able to be pretty simple.

See the Pen Day 4: Tiger on CodePen.

Day Five: Favorite Animated Animal

Day five was so freaking hard. I had such a hard time thinking through a favorite animated animal. WALL•E, wait robot, not animal. Buzz Lightyear, again not an animal. Ok, um…well. Thinking through it brought me to the Lion King. As a child of the 90’s this made sense, and it was ripe for the picking. But why, Scar? Maybe it’s Jeremy Irons’ voice that just rings in my ears when I think of that movie. I had this eerie vision of Scar’s yellow eyes bursting out of the shadows. I love how this came together, even though I had to ditch my single element extra challenge, but it was worthwhile.

See the Pen Day 5: Scar Lurking on CodePen.

Week Two

After a week full of animals, I assumed there would be an overarching theme for each week. I didn’t quite expect the office supplies of week two, but it turned into a really fun week of challenges.

Day Six: Clock

My first picked pen! Single element and animated. So fun.

See the Pen Day 6: Clock on CodePen.

Day Seven: Ruler

This was my extra challenge of week two. Kept this image a single element, but had an extra twist of adding a print stylesheet that printed up an actual ruler. It isn’t to scale and depends on what browser you print it from, but you know what, it’s still cool.

See the Pen Day 7: Ruler on CodePen.

Day Eight: Note Pad

After the moving clock, and the (somewhat, not really) usable ruler, what next? I thought about doing a print version again that printed up a blank page. But, I ended up going with contenteditable and allowing everyone to leave a note for themselves.

See the Pen Day 8: Note Pad on CodePen.

Day Nine: Calendar

Well, totally missed this on the day. So, I made a simple calendar that displays the day I made it instead of the day of the challenge.

…single element!

See the Pen Day 9: Calendar on CodePen.

Day Ten: Pencil Jar

At this point I am figuring the challenge of each week is going to be complex. I think I like that though. Throughout the week I’ll try to keep a single element and then go crazy on Friday! So, here is a pencil jar, complete with a couple of pencils and backdrop-filter.

See the Pen Day 10: Pencil Jar on CodePen.

Alright week one and two down. Three more weeks to go, and time allowing I’ll have an update at the end of each week.