Daily CSS Image #4: Tiger

      No Comments on Daily CSS Image #4: Tiger
A pure CSS image of a tiger

A pure CSS image of a tiger.

I signed up for the Daily CSS Image newsletter. It’s a way to improve your CSS skills by creating pure CSS images. My CSS skills are okay, but could definitely stand to improve.  I was pretty intimidated going into this, but it turned out pretty fun, so I decided to blog about it a bit.

Today’s challenge was to create a tiger using only CSS. The first few images I did, I did without viewing any resources on the subject. Last night I decided to watch the tutorial video that goes along with the challenge. It was pretty informative, and I’m glad I watched it. I applied some of the techniques I picked up from the video to this image.

CSS image with clip-path

The CSS image tutorial I linked above uses clip paths to make triangles. Clippy is a tool for creating these clip paths. Basically, I think the way it works is, you create nodes within a shape and the clip path connects the nodes and masks the background of the area outside of the node paths.

The clip paths can be used to make both simple and more elaborate shapes. I used it to create my stripes on the original version of my tiger. It looked great in Chrome, but it turns out it pretty much only looks great in Chrome.

CSS image without clip paths applied

CSS Image when clip paths are not applied

The image to the right shows what it looks like in Firefox. The clip path is not applied, which means the full rectangle appears on the page. My tiger ended up looking like he was wearing Magneto’s helmet.

Even though I use Chrome exclusively, I wasn’t thrilled with having something that only works in one browser. I decided to take a different approach.

CSS image with triangles created using border-trick

I was already familiar with using a border trick to create CSS triangles. In fact, it is the technique I used to make my tiger’s ears. The trick is to add three borders to a rectangular div that has no background color. One border is the color that you want for your triangle; its pixel width will determine the height of the triangle. The other two borders are transparent and their pixel widths determine the shape and thickness of the triangle. For more information about CSS triangles, check out the CSS Tricks article that does a way better job describing it than I can.

I forked my tiger on CodePen and spent some time refactoring the CSS. This is what the CSS for the stripe looks like using the border trick:

.stripe {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 40px solid black;
    position: absolute;
    z-index: 5;

The Firefox-friendly version of my tiger is here: Tiger

Final Thoughts

For more complicated shapes than a triangle, the clip path may be the right call. Can I Use says that it covers 87.9% of users, so that’s not terrible. For such a simple shape, however, I think the border trick is probably the best bet. It’s not any more difficult than using the clip path (it may even be easier).

You can view the Chrome version here: Tiger using clip-paths

The Firefox-friendly version is here: Tiger using border properties

If you’d like to see the complete collection of CSS images I have created for this challenge, there is a collection here: CSS Images collection on CodePen

Leave a Reply

Your email address will not be published. Required fields are marked *