O'Reilly logo

Beginning iOS Application Development with HTML and JavaScript® by Richard Wagner

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required