Safari visual effects allow you to create sophisticated graphical user interfaces for web applications for the desktop and iPhone OS. The visual effects available range from image effects using gradients, masks, and reflections, to more complex 2D and 3D effects.
These CSS and the DOM visual effects extensions allow you to add 2D and 3D graphics to your web applications, create complex animations, and generate smooth transitions when element properties—such as position or color—change. When you combine these visual effects with DOM mouse and touch events, you can create interactive applications, similar to native applications, that run in Safari.
Some of the properties and classes described in this book are proposed W3C standards or Apple extensions. Properties in CSS that begin with -webkit are usually proposed standards—the -webkit prefix will be dropped when they are approved. Similarly, JavaScript classes that begin with WebKit are also proposed standards or Apple extensions.
Important: Not all CSS properties and JavaScript classes described in this book are supported on all Safari platforms. Refer to the respective reference documents, Safari CSS Reference and Safari DOM Additions Reference for support level and availability details.
You should read this document if you want to use visual effects in your web content and web applications—if you are creating web applications for either Safari on the desktop or iPhone OS. Definitely read this document if you are creating a custom web application for iPhone.
The articles in this book are as follows:
“Gradients” explains how to use linear and radial gradients in place of images.
“Masks” explains how to block out or obscure areas of an element.
“Reflections” explains how to create a mirror image effect of an element.
“Transitions” explains how to add transitions to your content that animate property value changes.
“Animations” covers the basics on how to add animations to your content, including creating keyframes and setting timing functions.
“Transforms” describes how to add 2D and 3D graphics effects to your content.
“Interactive Visual Effects” provides step-by-step instructions on how to combine DOM events with visual effects to create interactive web applications.
There are a variety of other resources for Safari web content developers in the ADC Reference Library.
For details on properties and classes discussed in this book, refer to these visual effects reference documents:
Safari DOM Additions Reference describes the touch event classes that you use to handle multi-touch gestures in JavaScript.
Safari CSS Reference describes the CSS properties supported by various Safari and WebKit applications.
If you are creating content for Safari on iPhone OS, also read these documents:
Safari Web Content Guide describes how to create content that is compatible with, optimized for, and customized for iPhone OS.
iPhone Human Interface Guidelines for Web Applications provides user interface guidelines for designing webpages and web applications for Safari on iPhone OS.
If you want to use the JavaScript media APIs, then you should read these documents:
JavaScript Scripting Guide for QuickTime describes how to use JavaScript to query and control the QuickTime plug-in directly.
If you are combining visual effects with touch events on iPhone OS, see this sample code:
FingerTips demonstrates how to build an interactive 3D carousel using CSS, JavaScript and touch events.
If you want to read the WebKit W3C proposals, then go to http://www.webkit.org/specs.
Last updated: 2010-05-26