Over time, in my journey to mastering CSS, I came across a handful of realistic looking logos skillfully crafted in nothing more than CSS. Today I’m sharing with you 6 of them which I can remember. Keep in mind that in order to see these logos properly you need to be running the latest version of a WebKit based browser such as Safari or Chrome. Most of them should look alright in the latest versions of Firefox too.
- Opera – First up is the logo of the quite popular Opera web browser. In order to create it the artist made good use of a handful of CSS3 properties most notably border radius, gradients and box shadow.
- Internet Explorer – Most web developers only use this browser for testing purposes, but this CSS reproduction of the logo is nothing short of stunning. Among other CSS properties, this logo was created taking full advantage of the CSS3 transform property.
- Reddit Alien – Enjoy this pure CSS version mascot of the website you probably use more than any other.
- HTML5 – A handful of CSS skewing and rotating has been done in order to put together this clean logo.
- Ubuntu – This one is for all you Ubuntu fanboys out there. Clever use of element positioning made this logo possible.
- BMW – The list would not be complete without a full CSS version of the BMW logo!