CHAPTER 7. COLORS 77
linear and radial.
Exam Question 136(p.344): Gradient is an example of what CSS at-
tribute?
Acceptable Answer:background-image:
Exam Question 137(p.344): List the two types of gradients.
Required Answer:linear, radial
Color Stops
The background image is presented as bands of color. For linear gradients
it starts at one edge of the image and moves to the other edge. For radial
gradients it starts at the center and moves to the outside.
For each color stop you specify a color in one of the usual ways (by name,
hex, rgb, etc.). The first color stop will be at 0% (the starting point) and the
last will be at 100% (the ending point), with any other color stops evenly
spaced between. You can override the spacing by giving specific locations
(like 50%).
If you put two color stops at the same location, the blending will be instant,
which means that you will get an immediate change of color instead of a
gradual blend.
Linear Gradients
Linear gradients also have an angle: 0deg (zero degrees) goes from bottom
to top. 90deg goes from left to right. 180deg goes from top to bottom and
is the default. 270deg goes from right to left.
Here is an example of a linear rainbow gradient with red on the left:
h1 { background-image: linear-gradient( 90deg,
red, orange, yellow, green, blue, indigo, violet ); }
Radial Gradients
Radial gradients have a starting point and a shape.
The starting point defaults to the center of the space. A different center