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 just recently changed to a new theme for my site. Since then, I’ve been doing my first real digging into the internals of how theming works and how to talk to the back end of WordPress. It’s been a suprisingly pleasant venture – all your content is easily accessible and the interface is clean. I’m just starting to learn PHP (from a .NET background), and it’s been nice to find that I can hack around and usually get the code right on the first or second try.
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 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!
Here’s a quick demo of how to use CSS animation to hide a page element on click. This technique is only useful in a webkit-based browser, such as Safari of Chrome – I’d highly suggest checking it out in one of these browsers.