Pure CSS Icons (animated 3D Super Mario and IE Logo)

This morning I discovered that Andreas Jacob had created a childhood classic in CSS3. He’s created a CSS3 version of Mario from the days of the NES and 8-bit gaming.

In most CSS3 capable browsers the image renders in 2D however in Chrome 9 the image renders in 3D and rotates. Which is very cool. For the best effect I’d recommend you view the source link below in the latest version of Chrome. Firefox 3.6, Opera 10.6 & IE9 are not supported.

Continue reading Pure CSS Icons (animated 3D Super Mario and IE Logo)

CSS3 Solar System (using webkit)

This week I discovered another CSS3 test which I need to share with you all. By using CSS3 fea­tures such as border-radius, trans­forms and anim­a­tions. The result is very impressive, and while a little jerky on my old macbook (most likely because the machine is pushing 4 years old) still does the job.

Continue reading CSS3 Solar System (using webkit)

CSS2 and CSS3 Help Sheets (Liquidicity)

Last week I posted a Vi Help Sheet I discovered on Smashing Magazine by Liquidicity, and this week they’ve released one for CSS2 and CSS3. Both are worth downloading and using for reference in my opinion. They are again, very clear and easy to read. They do not cover all CSS properties, simply because there are too many to fit onto 2 A4 sheets, but then contain most of the important ones.

Continue reading CSS2 and CSS3 Help Sheets (Liquidicity)

Fun with CSS3 and Webkit

The power of CSS3 and Webkit really impresses me, especially when I see people creating fantastic things like a StarWars AT-AT which looks like it’s moving without using flash.

http://anthonycalzadilla.com/css3-ATAT/index.html

After the announcement of the new Apple iPad last week, and the fact it will not support flash there is still hope for rich interactive content with CSS3 and Webkit.

NOTE: Only webkit browsers (Chrome and Safari) can view the animation correctly.