You guys have probably seen some awesome logos designed in pure CSS3 around the Web such as Opera, Internet Explorer, Twitter and many more. I wanted to try to make ones, so I decided to make logos of my working company (this totally was a personal choice and a personal work). After a couple of hours of work, here is the result:

Pure CSS Logos

View live demo

Of course, for better results you need to use latest browser versions which support radial gradient backgrounds, transformations, border radius, etc. If you are using the latest Chrome, Safari, Firefox, Opera or Internet Explorer 10, that will be fine.

  1. The first approach
  2. Browser rendering results
    1. Google Chrome (10, 11, 14, 23)
    2. Mozilla Firefox (3.6, 4, 5, 16)
    3. Internet Explorer (7, 8, 9, 10 preview)
    4. Opera (10.50, 11.11, 11.64, 12.0)
  3. Debugging/Helping tools

The first approach

First of all, I needed to figure out how to build the structure of the logo with HTML elements only: I had to decompose the picture in different layers (I mean the <div>) and to think about the way to design them with only CSS properties in the same time. In other words, there are many conditions and constraints to be aware of.

For the structure, the first Ubisoft logo contains 16 layers with 10 full circles (radial gradients and shadows) and 6 for details (colorized borders). The green one has 10 full circles and the Owlient logo has only 4, ears are in a <div> actually.

Browser rendering results

Here are some screenshots from different browser versions. I deliberately chose browsers regarding their rendering engines to have a larger panel for this showcase: WebKit (Chrome, Safari), Gecko (Firefox), Presto (Opera) and Trident-based (Internet Explorer).

Google Chrome

Chrome actually supports background gradients, but the keyword radial has to come inside the -webkit-gradient(radial, [...]) instead of -webkit-radial-gradient([...]). This attribute came in the version 11. There is no difference between versions 11 and 23 except the anti-aliasing.

Pure CSS Logos with Google Chrome 10

Google Chrome 10

Pure CSS Logos with Google Chrome 11 to 14

Google Chrome 11 to 14

Pure CSS Logos with Google Chrome 23

Google Chrome 23

Mozilla Firefox

There is no prefix on the border-radius properties, that is why Firefox 3.6 doesn't curve the blocks, but supports -moz-border-radius. Other properties/values have -moz prefix, such as transform (rotation) and radial-gradient.

Pure CSS Logos with Mozilla Firefox 3.6

Mozilla Firefox 3.6

Pure CSS Logos with Mozilla Firefox 4 to 16

Mozilla Firefox 4 to 16

Opera

It seems that the version 11.11 doesn't support the radial-gradient position (farthest-corner).

Pure CSS Logos with Opera 10.50

Opera 10.50

Pure CSS Logos with Opera 11.11

Opera 11.11

Pure CSS Logos with Opera 11.64 to 12

Opera 11.64 to 12

Internet Explorer

No CSS3 support in IE7 and 8 but IE9 supports border-radius and box-shadow properties.

Pure CSS Logos with Internet Explorer 7

Internet Explorer 7

Pure CSS Logos with Internet Explorer 8

Internet Explorer 8

Pure CSS Logos with Internet Explorer 9

Internet Explorer 9

Pure CSS Logos with Internet Explorer 10

Internet Explorer 10

Debugging/Helping tools

I built those logos manually, no export from files or anything. There are a lot of great tools to set gradients, here is a list of generators that I used:

For positioning I have simply used Firebug and the native DOM explorer of Chrome. :)

As usual, you can find the source here: https://github.com/srchea/Pure-CSS3-logos

Share & Comments
comments powered by Disqus