Daily CSS Images: Day 4

Guess what it is…


It’s a tiger!

It took a lot longer than the others. I added a lot more detail than I have in previous days and did a lot more planning.

Overly processed planning

As you can see, I planned out the CSS classes I would need and the variables I would use in those classes. I also planned the unusual shapes as well by pointing to them on the sketch.

The tiger ended up a little bit different than I planned. I used a linear gradient to apply the stripes on almost everything, so I didn’t get the look I drew. The ears and tail were made by using the border style of “dotted” with a solid black border underneath.

These two tricks were specifically learned for this tiger. I wanted to be “lazy” and not draw a stripe everywhere I wanted a stripe, so I learned how to use the linear gradient to achieve the look.

Below is the codepen for the Tiger

As always, comments and improvements are appreciated!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.