Last week WebKit included the much anticipated (at least on my part) 3D transforms in its latest nightly build, announced practically alongside the awesome Snow Stack demo that provides a 3D interface for browsing Flickr images (use left, right and space-bar). Today the Surfin Safari blog has updated with some more exciting demos, including “Morphin […]
Accordion using only CSS
An accordion effect can be achieved using CSS3’s :target pseudo-class, without requiring JavaScript. Using the proprietary –webkit-transition property this accordion can also be animated.
Result
CSS3 Accordion
Works in browsers that support the :target pseudo-class, see the Quirks Mode compatibility tables. Animation works in recent WebKit based browsers.
How To
Each part of the accordion has an ID, heading and […]
Moving markup towards HTML5
Having read John Resig’s “HTML5 Shiv” article and Remy Sharp’s “HTML5 enabling script”, it felt like the right time to begin the full fledged migration from XHTML to a cross browser compatible HTML5 blog. All in all the process of updating the templates was painless, taking about an hour or so to modify the Wordpress […]
3D Cube using CSS transformations
Update (July 21st): Using newly released (currently only in Webkit Nightly releases) 3D transforms, a three dimensional, rotating cube with correct perspective is possible, and as a bonus – the cube can be navigated using arrow keys. Check out the latest demo, “Animated CSS3 cube using 3D transforms”.
The impression of a three dimensional cube can be created […]
Auto-scrolling Parallax Effect without JavaScript
Here’s another quick CSS3/WebKit transitions project in the controversial realm of CSS animation. This time I have opted to recreate the popular parallax effect using multiple background images on a single element and the –webkit-transition property (documentation). I have based this on Chris Coyier’s parallax tutorial, reusing the star images with permission, the technique itself […]
