HTML5, JavaScript, and jQuery 24-Hour Trainer

Lesson 27

CSS3: Part II

This lesson will continue where the previous lesson left off, and continue looking at CSS3 features. The features introduced in this lesson may seem somewhat familiar because many of these features were introduced with the Canvas API, such as linear gradients, transformations, and transitions.

These features have been introduced to allow browsers to natively implement complex visual effects that previously could only be achieved with images, or DOM manipulation.

Note

Before beginning this lesson, it is worth reiterating that CSS3 is a major specification in its own right; thus, this lesson will only touch the surface of what can be achieved with these features.

Linear Gradients

CSS3 linear gradients have a lot in common with those introduced with the Canvas API. A line is imagined for the gradient to run through, and colors are defined for points along the line. The browser is then responsible for creating a smooth transition from one color to the next.

In order to define a linear gradient, it is necessary to use a CSS function called linear-gradient. Although I have not discussed CSS functions so far, you have seen them in action. For instance, in the previous lesson a URL was defined as follows:

url("border.png")

A CSS function is just like a JavaScript function: It accepts parameters and returns a value. Throughout this lesson, you will use a number of useful CSS functions, beginning with linear-gradient. The main difference between CSS and ...