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 […]
Time for some CSS debate
That’s the best pun I could think of, pretty lame to be honest. My first foray into shared experimental CSS (proprietary WebKit properties used to create a clock animation) has fired up an interesting debate; where should the realm of cascaded style sheets end?
This clock experiment does not advocate such use of style sheets, it […]
