Hey everyone, it’s time to get some demos out once again!

First off, I was really impressed when I found out that Webkit now has now ported over 3D CSS Transforms over from the iPhone webkit fork, and they showed us some really cool demos a couple days ago. Obviously I couldn’t resist and grabbed a bunch of them, transformed them over hours only to recreate one of my plugins with some extra webkit spice. Meet the Ubercarousel!

Note: You need to download a nightly of Webkit in order to see this!

The Ubercarousel in latest Webkit nightly

The Ubercarousel is using almost every latest CSS enhancements build into Webkit (including CSS 3). Here’s a quick list:

  • CSS Gradients for the overall background and the reflection (yep, shamelessly ripped from the webkit demo ;)
  • RGBA (on the control panel and the debug backgrounds)
  • 3D Transforms (Rotation and translation on the Z Axis)
  • CSS Animations (For the spinning animation and the wobbling)
  • CSS Transitions (for the hovering of the images)
  • CSS Reflections (using a gradient)
  • Appearance (For the sliders, it’s a range input)

Functionality wise, it just grabs the 100 most recent interesting pictures from Flickr and displays some of them in the carousel, enlarging them when you hover. While working on this demonstration, I found out about a couple bugs and hit some walls, but generally I was extremely impressed of how well you can combine various new enhancements. To mention some issues, the inner <img> tag needs a “translateZ(0px)” or otherwise the images will be blurry, gradients don’t animate and are generally hidden when something is transformed, and transforms that are applied on :hover don’t play well with the wobble animation.  Anyway, have fun!

Uberplayer now in HD!

On a side note, Google finally added support for HD playback for their chromeless player, so from today on, the Uberplayer supports HD playback. Enjoy!

Reply with a tweet or leave a Webmention. Both will appear here.