I’ve meshed up a HTML5 and CSS3 demo in the form of the New York Times. No JavaScript involved in the making.

HTML5 Video – I’m using a nice animated video called the Elephant Dream, the video is encoded in WebM. WebM is the newly announced royalty-free media file format. Google, Firefox, Opera and others have announced support for this new format. Currently WebM video works in Opera labs build, and a special Firefox nightly. Opera 10.6 beta will be having WebM support too.

Since Google is the main force behind the WebM project, we should see Chrome support soon as well. (They are the ones who bought a company called On2 Technologies, opened up On2′s video codec and made it into the WebM project).

Safari has not announced support for WebM, not yet at least. You can encode HTML5 Video in H.264 to get Safari working. For older versions of browsers that don’t support it, you’ll probably see an image placeholder.

CSS3 – Well, it’s mostly Transitions/2D Transform and Borders/Background/box-shadow. They make things such as sliding and shadow effect possible.

Transitions work in Safari, Chrome and Opera, but not Firefox. It is suggested that Firefox 4.x will support transitions. So for now, Firefox users will not see the “smooth” transitions of certain news item in the The New York Times.

The rest of the CSS3 stuff should work in all four browsers.

Web Fonts – The newspaper title uses Web Fonts. With Web Fonts, designers are not anymore limited to the font types available on a user’s computer. So now lots of funky fonts can be downloaded to the browser and displayed. It works on Safari, Firefox, Opera and Chrome. For some reasons though, Google Chrome has decided not to enable it by default (yet), you’ll need to either to turn Web Fonts on in Google Chrome or just look at plain fonts instead.

The fonts used is Old English taken from FontStruct, they have some nice creative commons licensed web fonts.

Note1: For all the CSS3/HTML5 stuff mentioned to work, best use Opera Video Labs build or Opera 10.6xbeta. Safari renders very nicely too, but without the video.

Note2: the original layout of the newspaper demo is adapted from Daniel Davis’ Japanese Web Fonts showcase.