Here’s a 3D CSS Animated Image Carousel that I created while I was learning about 3D CSS animation. Watch the video above to see the technique in action. If you’re on a 3D CSS animation capable browser (currently a non-production version of MAC Safari and mobile Safari in the iPhone and iPod Touch), go ahead and check it out. The video was shot with my XBOX360 webcam, of all things.

I’ve also been making some progressive enhancements to the site at the same time. If you came in via a webkit-based browser, you’ll hopefully notice the webkit-only light blue gradient behind post titles, as opposed to a solid color. I also animated the RSS button in the upper right hand corner to grow 10% larger on hover. These are examples of ways to embrace progressive flourishes on your site without breaking the experience for anyone. Next up, I’m going to incorporate rgba into the footer somehow. Hope you enjoy the new layout!

I’ve been focusing a lot lately on demonstrating some CSS animation techniques. That’s all fine and well, but there is definitely a need for some instructional material on the web. To that end, check out this CSS animation tutorial that I just finished. It will teach you some techniques that are useful today in a mixed-support world for CSS animations. All the examples covered are progressive animations that require little work on your part, and that also don’t significantly impact user experience if they are unable to view them.

I wrote the demo using straight HTML and jQuery UI instead of the normal blogging platform. To that end, there’s no support for comments on the tutorial so feel free to comment here if you’re interested. Enjoy!

I’ve been working on some demonstrations on how to combine jQuery UI and CSS animations for some pretty neat effects.

Not to pimp my other businesses too much or anything, but check out blaq design if you want to see an eCommerce site done up with jQuery UI as well.

I’ve been working a lot more on CSS animations lately. There’s not much documentation out there and what is available is incomplete, so working with them is definitely a bit of a chore. I’ve been creating some examples that are pretty cool and demonstrate some more difficult techniques. They only work in Safari and Chrome, so fire one of those up and click through.

I’ve been working mostly with the onclick event. The hover event is ultimately a bit disappointing because it reverses the animation effect when you stop hovering. That’s good for effects like growing buttons on hover, but not for a lot of other uses. The one-way nature of the onclick event means that it doesn’t cause the animation to reverse itself, which leads to some pretty neat effects. Check out these examples, and let me know if you end up using anything from them – I’m very curious to see what people do with this technology!

I’m Off!

Using one of the aforementioned browsers, click on the box above. It should fly off the left side of the page, rotating and getting smaller as it moves off the page. This has the effect of appearing to be removed from the page. In reality, the section is still there, it’s just been moved to the left. This is little more than a tech demo at this point, since CSS animations aren’t supported in the more popular browsers, including Firefox and Internet Explorer – using JavaScript for such a technique is still highly recommended for now.