HTML and CSS Reference
In-Depth Information
figure 8-19
Rotating an object in three dimensions
transform: perspective(150)
rotateX(60deg);
transform: perspective(100)
rotate3d(1, -1.5, -1, 35deg);
transform:
perspective(100)
rotateY(30deg);
You can explore how to achieve 3D transformations using the
demo_
transformations3d.htm
file in the tutorial.08/demo folder. Note, however, that at the
time of this writing, these 3D visual effects are supported only by Safari and Google
Chrome, and only through the use of the WebKit browser extension. Thus, you will
not be applying them to Kevin's document.
Applying a Color Gradient
Next, Kevin wants you to add background colors to the
article
element in his Web
page. So far, you've worked with foregrounds and backgrounds consisting of a single
color; but Kevin wants a background with a
color gradient
, in which one color gradually
blends into another or, if transparent colors are used, fades away altogether. For example,
Kevin wants a background that starts out in solid green and gradually fades away. One
challenge of creating color gradients is that different browsers employ different styles
to achieve the gradient effect, and there are several options that control the number of
colors involved, the direction of the gradient, and how many times a particular color
gradient is repeated within the object. Before modifying Kevin's document, you'll first
examine the CSS3 gradient functions and their browser extensions.
Creating Linear Gradients with CSS3
One type of gradient is a
linear gradient
in which the color blending proceeds horizon-
tally or vertically across an object's background. The CSS3 function to create a vertical
linear gradient has the basic syntax
linear-gradient(
color1
,
color2
, …)
in which
color1
,
color2
, etc. are the colors that blend into each other moving from the
top of the object to the bottom. Figure 8-20 shows a simple color gradient in which the
background color blends from red to yellow and finally to blue.
