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 […]
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 […]
An analogue clock using only CSS
Having read the blurb around Safari’s CSS transitions I opted to familiarize myself with a quick project — the aim of which was to create a functional, CSS only, analogue clock.
Result
Experiment: CSS Analogue Clock
Experiment works in Safari 4 Beta and Google Chrome. A working clock that optionally resorts to JavaScript to grab the current time (can be achieved […]
