HTML and CSS Reference
In-Depth Information
To add box shadows to the page elements:
◗
1.
Return to the
effects.css
file in your text editor.
◗
2.
At the bottom of the file, insert the following style rule to create rounded corners
and drop shadows for every inline image within a figure box:
/* Box shadow styles */
figure img {
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-moz-box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 15px;
box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 15px;
}
◗
3.
Add the following style rule to create an interior beveled border for the entire
main section element:
section#main {
-moz-box-shadow: inset rgba(0, 0, 0, 0.3) -5px -5px 10px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.3) -5px -5px 10px;
box-shadow: inset rgba(0, 0, 0, 0.3) -5px -5px 10px;
}
◗
4.
Finally, add the following style rule to apply a drop shadow to the Web table
nested within the main section. Figure 8-7 highlights the revised code in the
style sheet.
section#main table {
-moz-box-shadow: black 5px 5px 5px;
-webkit-box-shadow: black 5px 5px 5px;
box-shadow: black 5px 5px 5px;
}
figure 8-7
Adding box shadows to page elements
adds rounded
borders to images
within figure boxes
adds a semi-
transparent black
shadow to the
lower-right corner of
the figure with a blur
radius of 15 pixels
adds an interior drop
shadow to the low
er-
right corner of the
main section with a
blur radius of 10 pixels
adds a black shadow
to the lower-right
corner of the table
within the main
section
