Nicholas Gallagher:


  This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript.


It bears repeating that the point of experiments like this isn’t to replace logos with CSS, but to show that fairly complex designs can be made in CSS - and you’ll need that sooner or later.

A similar, and more useful, demo: CSS speech bubbles.

Nicholas Gallagher:

This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript.

It bears repeating that the point of experiments like this isn’t to replace logos with CSS, but to show that fairly complex designs can be made in CSS - and you’ll need that sooner or later.

A similar, and more useful, demo: CSS speech bubbles.

5/31/2010   #css #demo
HTML5 form demo

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.)

5/24/2010   #form #demo #animation
Things we left on the moon

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

5/24/2010   #css #animation #demo
Snow Stack

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)

Pure CSS3 AT-AT Walker

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.

CSS world clocks by lensco. No images were harmed in the making of this excellent CSS demo. No JavaScript, even.

CSS world clocks by lensco. No images were harmed in the making of this excellent CSS demo. No JavaScript, even.

guillee:

Here’s another thing I made while messing with WebKit’s CSS 3D transforms, transitions, and animations, based on their morphing power cubes demo.

The clock’s “wheels” are turned with JavaScript, but they’re built and animated entirely with CSS. Like the CSS Star Wars demo, for now this only works in Snow Leopard with Safari 4 or the WebKit nightly, and, surprisingly, on the iPhone. Try it here: CSS clock. I also made a CSS timer that works entirely without JavaScript, using only CSS animations.

HTML5 Presentation

A slideshow on HTML5 using HTML5.

5/19/2010   #css #demo #reference
Quite impressive transformations of live video using Canvas. Notes that you can transform video in 3D space much easier using -webkit-transform.

Quite impressive transformations of live video using Canvas. Notes that you can transform video in 3D space much easier using -webkit-transform.

5/19/2010   #canvas #demo #video #3d
A visualization of our solar system created largely using CSS3. Note that this also demonstrates some rendering problems with WebKit’s current implementation of rounded corners - the circles are imperfect when rotated.

A visualization of our solar system created largely using CSS3. Note that this also demonstrates some rendering problems with WebKit’s current implementation of rounded corners - the circles are imperfect when rotated.