Paul Hayes

2009

Creating an animated 3D CSS cube using 3D transforms

A 3D cube can be cre­ated solely in CSS, with all six faces. Using JavaScript to detect key presses and update inline styles this cube can be intu­itively nav­i­gated. Last week WebKit included the much antic­i­pated (at least on my part) 3D trans­forms in its lat­est nightly build. It is now pos­si­ble to cre­ate all sorts of crazy three-dimensional and ani­mated user inter­faces; the power comes largely in -webkit-perspective and a num­ber of updated transforms–adapted to incor­po­rate the Z axis.

Creating an accordion using CSS transitions

A sim­ple accor­dion effect can be achieved using CSS3’s :target pseudo-class, with­out requir­ing JavaScript. Using the pro­pri­etary -webkit-transition prop­erty this accor­dion can also be animated.

Moving markup towards HTML5

Hav­ing read John Resig’s “HTML5 Shiv” arti­cle and Remy Sharp’s “HTML5 enabling script”, it felt like the right time to begin the full fledged migra­tion from XHTML to a cross browser com­pat­i­ble HTML5 blog. All in all the process of updat­ing the tem­plates was pain­less, tak­ing about an hour or so to mod­ify the Word­press Sand­box theme.

Creating a 3D Cube using 2D CSS transformations

The impres­sion of a three dimen­sional cube can be cre­ated using mod­ern CSS tech­niques, with­out the need for JavaScript, imagery, can­vas or SVG. Using the pro­pri­etary trans­form prop­erty to skew and rotate shaded rec­tan­gles, indi­vid­ual cube faces can com­bine to form a 3D object. This arti­cle out­lines how, with two experiments.

Create an auto-scrolling parallax effect without JavaScript

Here’s another CSS3/WebKit tran­si­tions exper­i­ment in the (con­tro­ver­sial) realm of CSS ani­ma­tion. In this arti­cle I recre­ate the pop­u­lar par­al­lax effect using mul­ti­ple back­ground images on a sin­gle ele­ment, and ani­mat­ing with the recent -webkit-transition property.