HTML and CSS Reference
In-Depth Information
Complete the following:
1. In your text editor, open the
messtxt.htm
and
sweffectstxt.css
files from the
tutorial.08\case3 folder included with your Data Files. Enter
your name
and
the date
in the comment section of each file. Save the files as
messier.htm
and
sweffects.css
,
respectively.
2. Go to the
sweffects.css
file. Create a style rule for the
body
element to add a radial
gradient background using the CSS3
radial-gradient()
function. For the function,
set the horizontal and vertical centers of the gradient to 40% and 70%, respectively.
Display a circular gradient with the size that extends to the nearest corner. Have the
gradient go from a solid white center to a color value of (171, 171, 171) with an
opacity of 0.5. Set the color stop of the outer color to 50%.
3. Add two more CSS3 radial gradients to the body background in a comma-separated
list. Use the same colors that you used in the first radial gradient. The next gradient
should be centered at (80%, 20%) with a circular shape that extends to the nearest
corner. Add a color stop of 20% to the second radial gradient. For the third radial
gradient, set the center at (10%, 10%) and set the shape to an ellipse extended to the
nearest side. Set the color stop of the outer color to 25%.
4. Duplicate the background style you created for different browsers by adding the
appropriate browser extensions.
5. For WebKit browsers, create the radial gradients using the
gradient()
function. Use
the same inner and outer colors as you did for the CSS3
radial-gradient()
func-
tion. Set up the three radial gradients as follows:
a. Place the inner and outer centers of the first gradient at the point (40%, 70%). Set
the inner and outer radii to 0 and 180, respectively.
b. Place the inner and outer centers of the second gradient at the point (80%, 20%).
Set the inner and outer radii to 0 and 90, respectively.
c. Place the inner and outer centers of the third gradient at the point (10%, 10%).
Set the inner and outer radii to 0 and 20, respectively.
6. Save your changes to the style sheet, and then return to the
messier.htm
file in your
text editor. Create a link to the
sweffects.css
style sheet file.
7. Save your changes to the document, and then view it in your Web browser. Verify
that three radial gradients appear in the background of the Web page. (Note: If
you are using a version of Internet Explorer before version 10, you will not see any
radial gradients.)
8. Dr. Weiss also wants you to create a print style sheet to display the summary of
Messier objects on the first page with a description of each Messier object on its own
page. Figure 8-69 shows a preview of the design of the printed page.
