Image gallery with CSS3 transforms, transitions and more

Exciting times for CSS3. As of version 3.5, Firefox offers support for the box-shadow and transition properties. With 3.6 we get CSS3 gradients and multiple backgrounds and 3.7 promises to follow with the transition family of properties.

Partly as a result, lovely CSS3 galleries have been cropping up lately, some with the help of jQuery, some without.

To add to the heap, I thought I’d dust off the CSS3 gallery I built last year when WebKit first introduced support for transitions, transforms and fancy background features. Back then, this is what the gallery looked like in WebKit, with all the sexy new properties thrown onto it like a badly decorated Christmas tree:

css3-gallery

Updated with the newly supported properties of box shadow and transforms, the demo now looks a bit better in Firefox but still lacks support for transitions and background masks. That being said, I’m still a bit wary of transitions, as they seem to suffer from performance issues. Best to let JS do the heavy lifting.

View the gallery demo, ideally in latest WebKit/Safari, or FF3.5+.

Leave a Reply