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:
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.
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.
Google Chrome 11 to 14
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.
Mozilla Firefox 3.6
Mozilla Firefox 4 to 16
Opera
It seems that the version 11.11 doesn’t support the radial-gradient position (farthest-corner).
Opera 10.50
Opera 11.11
Opera 11.64 to 12
Internet Explorer
No CSS3 support in IE7 and 8 but IE9 supports border-radius and box-shadow properties.
Internet Explorer 7
Internet Explorer 8
Internet Explorer 9
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