View Demo

#dailycssimages – Day 1

CSS Images

Yesterday I was having a scroll through the stack of posts waiting for me on Feedly after the weekend, and I came across an interesting read by Sasha Tran who had written an article about drawing CSS images. She started out doing Codevember, and then moved onto the Daily CSS Images Challenge by Michael Mangialardi.

You should definitely checkout her article because she has made some really cool pictures using just HTML and CSS which is incredible.

As I have a penchant for challenges (somewhat competitive nature) and I love the idea of combining creativity with code, I thought I would give this a try so I signed up straight away.

So first up, nice and easy, a bear cub

#dailycssimages - Day 1 - Bear Cub

View Demo    View on GitHub

Yeah, he looks good now but don’t get me wrong, in the beginning I panicked! I’m a frontend web developer – my job is taking someone else’s designs and turning them into code. Now I was being asked to come up with my own design!

After a bit of googling and scrolling through Twitter and Dribble, I had the start of an idea.

I realised quite quickly that I was going to have to think about layers a little more than usual, and that absolute positioning was my friend.

You can see the finished result HERE.

I used just HTML and SASS to build the bear, and enjoyed every second of it. It’s amazing how quickly time passes when you’re coding something fun! You can see the CodePen below of how I got it working.

See the Pen #dailycssimages – Day 1 by Laura (@lrobson555) on CodePen.