After my latest CSS3 experiment without images (Internet Explorer Pure CSS Logo), a friend suggested to create an animated 3D Super Mario Icon based on the 3D Retro Mario GIF image by Cezkid.
Well, this is the result of two weeks of work – an animated 3D Super Mario Icon built completely in CSS3 without images.
A still from Safari 5 with perspective and grids. Hover over the live demo to see this.
Demo: Pure CSS animated 3D Super Mario Icon
Source: Git Repository
Best viewed with Safari 5 & Chrome 9.
Chrome prior Version 9 renders in 2D only due to an older Webkit engine.
Opera 10.6, Firefox 3.6 and IE9 are not supported.
Please note that the source code is still a mess. You better not have a look at it ;-)
It’s based on top of my CSS 4D Framework I created therefor and will be released in the next few weeks (when it’s out of alpha).
When I stumbled over David Desandro’s Opera CSS Logo and Zander Martineau’s Pure CSS Icons, I really liked their idea to create “art” only with CSS.
So here is my work, the All CSS Internet Explorer Logo, a logo built completely in CSS, without any graphics.
See the Demo (best viewed with Firefox 3.6 & Safari 5)
Chrome 5 has a lot of issues at the moment due to an older Webkit engine. CSS for Opera 10.6 and IE9 are coming soon.
The CSS is a mess at the moment, I’ll clean it up later.
Internet Explorer & the Internet Explorer Logo are registered Trademarks of Microsoft. Download Internet Explorer.