HTML and CSS Reference
In-Depth Information
Figure 3.12. Our original design has shadows that we haven't yet added
Notice the red arrows pointing at various elements in
Figure 3.12
. All of these have
something in common: a subtle shadow attached to them, adding some depth to the design.
We could achieve that look using images, but it's messy to do, sometimes requiring extra
HTML elements, or some kind of JavaScript trick. We can do it with pure CSS, and the shad-
ows we add will be flexible and easy to change should we want to make any adjustments to
them in the future.
Adding a Shadow to the Header
First, let's add a shadow to the
<header>
element—the one at the top of the website that
sits above the big promo image. For this, we're going to use the
box-shadow
property:
