HTML and CSS Reference
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
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: