HTML and CSS Reference
In-Depth Information
2. Go to the
dweffects.css
file in your text editor. Create a style rule for the
body
ele-
ment to add two box shadows. One shadow should be placed on the right edge of
the page body with the color value (211, 211, 211) and an opacity of 0.5. Set the
horizontal offset to 10 pixels, the vertical offset to 0 pixels, and the blur to 15 pixels.
Create the same drop shadow on the left edge of the page body as well.
3. Apply the following style rules to each list item in the horizontal navigation list of
the page header: a) set the background color to the value (224, 238, 238); b) add
rounded corners 10 pixels in radius; and c) create two inset box shadows: one white
shadow located in the upper-left corner offset 3 pixels in the horizontal and vertical
direction with a blur of 2 pixels, and the other, a shadow in the lower-right corner
with a color value of (147, 207, 207) offset 5 pixels in the horizontal and vertical
direction with a blur of 5 pixels.
4. Add box shadows to the
article
element with the following properties: a) create
an inset box shadow in the lower-right corner with a color value of (171, 171, 171),
offset 15 pixels in the horizontal and vertical direction, and with a blur of 75 pixels;
and b) create an external shadow located in the lower-right corner with a color value
of (101, 101, 101), offset 5 pixels in the vertical and horizontal direction with a blur
of 5 pixels.
5. Add a horizontal background gradient to the
blockquote
element with the follow-
ing properties: a) set the gradient to go from the left to the right starting with the
color value (166, 230, 230), having a color stop at the 5% point with a value (231,
231, 231), and ending with the color value (255, 255, 255) 15% of the way across
the block quote; b) create the same color gradient using the WebKit
gradient()
function with a color stop for the middle color occurring at the 33% point; and
c) using the Internet Explorer
Gradient
filter, create a horizontal gradient that starts
with the hexadecimal color value DEF4F4 and ends with the value FFFFFF.
6. Save your changes to the file, and then return to the
recipe.htm
file in your text edi-
tor. Add a link to the
dweffects.css
style sheet file. Specify that the
dwlayout.css
and
dweffects.css
style sheets should be used with screen devices.
7. Save your changes to the document, and then view the page in your Web browser.
Verify that the appearance of the page resembles that shown in Figure 8-64. (Note:
If you are using Internet Explorer version 8 or earlier, your page will show only the
gradient effect around the block quotes, and the gradient will go from light teal to
white.)
8. Figure 8-65 shows a preview of the printed version of the recipe page, displaying the
recipe description and ingredients on the first page and the directions on the sec-
ond page. In your text editor, open the
dwprinttxt.css
file from the tutorial.08/case1
folder. Enter
your name
and
the date
in the comment section of the file, and then
save it as
dwprint.css
.
