Friday, September 2, 2011

The new Nansen logo vectorized in CSS3

In January this year (2011), W3C announced its new logo for the HTML5 standard (the superman logo) which created a lot of buzz among web developers in the community. Being a logo for HTML5, a lot of people joked that it should have been created in the same technique it stands for, HTML. It didn't take long before someone helped W3C do the job right.

I'm not sure who did it first, but one of them was Darcy Clarke, and it's pretty amazingly alike the real logo. Go have a look at his CSS/HTML version of the HTML5 logo.

As you probably have noticed, we have released our shiny new website a while ago, and with it came a new logo (*hint*). This got me remembering the HTML5 logo, and I felt it was my duty to try and do the same with the Nansen logo.

Luckily it's quite simple and really only consists of a circle and three rectangles. The most difficult part was to align the different elements correctly to form the N-letter. Have a look at the result below.

Think you can improve on the code? Go ahead and do it, and when your done, come join us at Nansen [swedish].

Open in new window


    -ms-transform: rotate(-29deg);

    Vendor specific attributes should be used for ie also :)