Animated CSS3 cube using 3D transforms

Last week Web­Kit included the much anti­cip­ated (at least on my part) 3D trans­forms in its latest nightly build, announced prac­tic­ally along­side the awe­some Snow Stack demo that provides a 3D inter­face for brows­ing Flickr images (use left, right and space-bar). Today the Surfin Safari blog has updated with some more excit­ing demos, includ­ing “Morphin […]

Accordion using only CSS

An accor­dion effect can be achieved using CSS3’s :tar­get pseudo-class, without requir­ing JavaS­cript. Using the pro­pri­et­ary –webkit-transition prop­erty this accor­dion can also be anim­ated.
Res­ult
CSS3 Accor­dion
Works in browsers that sup­port the :tar­get pseudo-class, see the Quirks Mode com­pat­ib­il­ity tables. Anim­a­tion works in recent Web­Kit based browsers.
How To
Each part of the accor­dion has an ID, head­ing and […]

Auto-scrolling Parallax Effect without JavaScript

Here’s another quick CSS3/WebKit trans­itions pro­ject in the con­tro­ver­sial realm of CSS anim­a­tion. This time I have opted to recre­ate the pop­u­lar par­al­lax effect using mul­tiple back­ground images on a single ele­ment and the –webkit-transition prop­erty (doc­u­ment­a­tion). I have based this on Chris Coyier’s par­al­lax tutorial, reusing the star images with per­mis­sion, the tech­nique itself […]

An analogue clock using only CSS

Hav­ing read the blurb around Safari’s CSS trans­itions I opted to famil­i­ar­ize myself with a quick pro­ject  —  the aim of which was to cre­ate a func­tional, CSS only, ana­logue clock.
Res­ult
Exper­i­ment: CSS Ana­logue Clock
Exper­i­ment works in Safari 4 Beta and Google Chrome. A work­ing clock that option­ally resorts to JavaS­cript to grab the cur­rent time (can be achieved […]