Marcus' Blog

MI CSS LOGO

February 16, 2013

I’ve been wanting to make the Modest Innovation logo a single div element made purely out of CSS (actual CSS version below), instead of an image. This was for a few reasons.

Firstly, I wanted to learn how make CSS icons by calling a single element. My logo is simple so I thought it would be a good starting point. Secondly, once it’s done it’ll save the headache of optimising it for retina display devices.
Lastly, it’s super fast and fucking awesome.

Inspired by one-div I set out to learn about the :before and :after pseudo elements (with the help of Smashing Magazine) and how it all works.

Feel free to use the code and manipulate it over on GitHub.

Comments

Leave a Reply