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.