Create a CSS3 Image Gallery with a 3D Lightbox Animation

• 19th April 2011
• Tutorials

For the most part, the CSS3 tutorials and examples out there are a little dull. Of course there are some really great examples out there such as Benjamin de Cock’s CSS Playground but most others consist of a drop-shadow here … Continue reading →

Use CSS3 Now!

• 11th January 2011
• Articles

I posted a quick tutorial yesterday showing how to use a simple CSS3 technique to spin some icons on hover. I’ve posted CSS3 tutorials before but all of a sudden this latest one has already received a few negative comments … Continue reading →

Hardboiled CSS3 Media Queries

• 12th October 2010
• Snippets

Andy Clarke offers a comprehensive starting point for media queries based on the specs of different devices such as smartphones and iPad as well as varying screen sizes. Apparently they’re part of a wider toolkit that he’ll be releasing with his book coming soon which is almost certainly going to be worth the wait.

Ultimate CSS Gradient Generator

• 6th October 2010
• Snippets

A gradient generator web app that mimics Photoshop’s gradient creation tool. Could do without the IE filter though. If you really have to use a gradient for IE, just write a conditional comment and only let IE users clock up another HTTP request.

Writing Clean CSS3 Code [updated]

• 1st September 2010
• Articles

One of the main problems with writing CSS3 code are the vendor prefixes. These are the -moz- or -webkit- you see before properties such as border-radius or text-shadow. They’re a necessary evil at worst and you’ll have to use them … Continue reading →

Use of CSS3 Goodness for GMail on the iPad

• 19th August 2010
• Snippets

An interesting note when writing translations in CSS3 for the iPad:

… it seems that 2D translations are not hardware-accelerated. But, since any 2D translation is equivalent to a corresponding 3D translation with the same translations in the x and y and no translation in the z axis, it is easy to use a hardware accelerated translate3d(x, y, 0) transform instead of a non-hardware accelerated translate(x, y) transform.