HTML5 Watch

Andreas Prediger:

Projekktor is an open source (GPL) HTML5 video player with flash fallback, playlist functionality and a customizable UI. All in all it solves cross browser and compatibility issues, adds some eye candy to the native players and provides some useful non standard features.

Haven’t tried installing it, but any effort to make HTML video embedding easier is fine by me.

Modernizr is a JavaScript library that helps you branch your CSS depending on the browser’s capabilities. I haven’t tried Modernizr itself yet, but their website is a nice demo of some CSS3 features, like rounded borders, gradients, shadows, reflections, and transitions.

A very simple but effective demo of some new form capabilities in HTML5: built-in validation and error display, range selectors, stepping. On top of that, some cute focusing animation. Note that there is no JavaScript on this page - zero.

This requires a WebKit nightly or a Chrome dev build.

(Submitted by Rick Bradshaw.)

A little demo of progressive enhancements to website interaction - animations, simple fades - by SimpleBits.

Doug McInnes recreated the classic arcade game Asteroids using canvas:

The Canvas element is super cool. Basically all of the sprites in the game are simple paths defined by an array of points. These points are translated, rotated and scaled based on their state at any given point in the game using the standard Canvas transformations.

(Submitted by Richard Bradshaw)

Rich Bradshaw has a page with some examples of CSS transitions and animations. Succinct and well explained. Make sure you also check the official docs and do your own research on top of any tutorial you read. It’s still the early days for HTML5 and CSS3; things change, both in spec and in implementation.

A classy photo-gallery demo. As with all CSS 3D examples, this requires a recent build of Safari. Chrome doesn’t currently support 3D transformations.

(Submitted by Charles Ying)

Mark Pilgrim goes into some really cool new form features in HTML5. Spoiler: placeholder text (“Enter your name here…”) is now an out-of-the-box feature.

g-metrics:

Thought I would pass along an experiment where I was able to recreate almost all of Safari 4’s interface entirely in HTML5 and CSS3, taking advantage of Webkit’s css prefixes.

It’s going to be a while before we can easily create animated cartoons in HTML, but the roadblocks are mainly on the creative-tool side. The rendering engines are almost there.

Not a terribly practical demo, but pretty involved nevertheless.

A simple but effective example of how -webkit-transition can make a design richer and more organic, while degrading gracefully.

An neat-looking combination of the standard WebKit “ring” demo and HTML5 local database functionality.