Chapter 11
Special Effects and Animation
WHAT YOU WILL LEARN IN THIS CHAPTER:
- Creating gradients using CSS and JavaScript
- Adding shadows and reflections
- Creating animations with JavaScript
The strengths of Safari on IOS 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, HTML 5, and CSS to create cool effects in your web apps. In this chapter, 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 a color gradually changes to another color over the surface of a canvas or other element. A linear gradient is applied to a rectangular block surface whereas a radial gradient is displayed as a circle. 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. Read on to find out how.
Creating CSS Gradients
You can use the Safari-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 end points of the gradient and are typically represented by ...
