Safari® and WebKit Development for iPhone® OS 3.0

Chapter 9. Special Effects and Advanced Graphics

The strengths of WebKit as a development platform are evident when you begin to explore the capabilities you have with advanced graphics, animation, and other special effects. You can utilize some of the more advanced capabilities of JavaScript, HTML5, and CSS to create cool effects in your Web apps.

I began looking at graphics programming in Chapter 8, "Programming the Canvas." I continue the discussion as I explore how to work with effects and animation.

Gradients

A gradient is a coloring effect you can add to your Web page in which one color gradually changes to another color over the surface of a canvas or other element. Linear gradients are applied to a rectangular block surface, whereas radial gradients are displayed as circles. You can specify the start and end colors as well as color values in between (known as color stops). You can create gradients in both CSS and JavaScript. I'll show you how.

Creating CSS Gradients

You can use the WebKit-supported function -webkit-gradient() to create a "virtual" gradient image and define it as an image URL parameter. Here's the syntax for a linear gradient:

-webkit-gradient(linear, startPoint, endPoint, from(color), color-stop(percent,
color), to(color))

The linear parameter defines the type of gradient. The startPoint and endPoint parameters define the start- and endpoints of the gradient and are typically represented by constants: left top, left bottom, right top, and right bottom.

The from() ...