Friday, November 7th, 2008

CSS-VFX: CSS Visual Effects Tutorials and Components

Category: Apple, iPhone

We’ve talked a bit about Apple’s extensions to HTML and CSS; <canvas> has of course gone on to much fame and fortune. Charles Ying pointed us to his CSS-VFX project which aims to be

a collection of components and code examples that illustrate the power of CSS Visual Effects. So far, only 1 gem that illustrates a popular RIA user interface demo, “Cover Flow” is currently available. If you’d like to see more, please don’t hesitate to suggest something you’d like to see.

Charles has a blog entry with a video showing off a mobile Safari demo of using Apple’s CSS Visual Effects to create a Cover Flow interface:

The demo makes use of a variety of these extensions:

* zflow starts by loading each image from the images array. When each image is loaded, we scale the image to fit in a square region, and apply 3D CSS transforms to scale it in place.
* Reflections – zflow then takes the scaled image and creates a Canvas element that contains a gradient alpha mask of the image’s reflection (using a “reflect” function to do this) and positions the canvas element in place.
* Touch Controller – zflow creates a TouchController object, who’s job is to field touch events from Mobile Safari and calculate an appropriate offset.
* Clicking – zflow detects when no move events have been made, and zooms + rotates the focused image forward by setting a “CSS Transition”ed 3D transform on the focused image. Clicking again transitions the image back.
* Inertia – zflow achieves inertia by setting the “transition timing function” of the “tray” to an “ease-out” function, which slows things down. On the touch end event, we calculate the projected velocity and set the tray’s target position to that location. CSS Transitions handles the decay in velocity as the transition timing function executes — slowing the tray down gradually.

It makes you wonder how many folks are going to need to learn the SDK in the future…

Posted by Ben Galbraith at 7:00 am

3.5 rating from 11 votes


Comments feed TrackBack URI

Is that strange? Years ago as MS was introucing own tags into the html standard to help his own appz to work – it was most evil. Today apple introduces all kinds off stuff they need to be hipp and slightly forces the other browser devs to adapt.

Comment by Aimos — November 7, 2008

Couldn’t agree more. M$ is killed for breaking standards but when Apple does it, it’s a ‘step forward’.

Comment by frio80 — November 7, 2008

Couldn’t disagree more. What standards are Apple breaking? There are no standards for these features yet. They have proposed these as standards, and have implemented them properly with the -webkit prefix. They’ve done exactly what a browser vendor is supposed to do when introducing new features.

Comment by MattCoz — November 7, 2008

People considered them “evil” because after they decide on a particular API, they stick with it and ignore the rest of the world because it wasn’t their standard (because they believe the world revolves around them and well…it did for awhile). A perfect example is VML.
How does that tie into apple? I think only time will tell.

Comment by TNO — November 7, 2008 formula:
Post stuff about Safari
– comments complaining about something ms did that is superficially similar
– lather
– rinse
– repeat

Comment by eyelidlessness — November 10, 2008

Leave a comment

You must be logged in to post a comment.