View Demo

#dailycssimages – Day 2

CSS Images

I’m a little last with my Day 2 – I think today I received Day 6 of the #dailycssimages challenge in my inbox.

The prompt for day two is ‘Elephant’, so here’s what I came up with!
#dailycssimages - Day 2 - Elephant

View Demo    View on GitHub

This one was definitely harder than the bear cub.

I took inspiration from this awesome elephant on Dribbble by SaleFish and I loved the symmetry and style of the graphic.

It was pretty simple putting together the head, ears, legs and trunk and they are relatively simple shapes to make and place. It got complicated however when it got to tusks.

First I tried using clip paths, layering ellipses to try and create the shape, but I couldn’t it to layer correctly with the other pieces, so in the end I pinched an idea from someone else (I can’t find who it was sorry!) to use a border and border-radius.

You can click the buttons above to see the demo, or checkout the code on CodePen below.

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