On April 30th, Fribourg Gottéron became champion of the Swiss ice hockey National League for the first time. I’ve watched the 2 last games of the series, boy it’s been so close. The scenario of the finale could not have been more intense.

I thought I would give a go to “a single div” exercise with the team’s logo as goal.

This is made with CSS only and using one single div. It’s no perfect match to the original but that was not the intent either. I’ve had fun playing around with this and learned a couple of things along the way.

The idea behind single div drawings has been introduced by Lynn Fisher on Mozilla Hacks. That pushes one to explore CSS as a medium, setting constraints to better master the craft. And I’m a fan of that message.

That article on Mozilla Hacks was written 12 (!) years ago but as it’s CSS, it still works just fine. Out of the techniques Lynn presents, I’ve used gradients, the 2 pseudo elements but no box-shadows. Besides that, I think it was interesting to use clip-path and conic-gradient which were not mainstream at the time of the article.

clip-path might be seen as cheating, I’m not sure. But again, the idea is to sharpen your skills on such a project. The central F of the logo has been laid out using clip-path. The blue shade of the central part of the letter is actually coming from layers bellow. The F stroke is cut out of a white rectangle part of one of the 2 pseudo elements. And I must say I still haven’t fully wrapped my mind on how that exactly works. Look to this codepen to see my struggle.

conic-gradient can be used to create triangles. The technique is the same as with the other gradients Lynn talks about. The trick is to use hard color stops and transparent as color value to make any triangle you wish for.

By now, Lynn stopped her A Single Div CSS drawing project, but it’s a wealth of nuggets. Lot’s of stuff to learn there!

Of course, no tooling makes anybody an artist, and I could see how mind bending that quickly becomes to draw with CSS. An interesting exercise for sure and that blows my mind to see Lynn’s creations. What you can do with just a single div! Indeed that pushes one’s creativity.