HTML and CSS Reference
In-Depth Information
body > header {
box-shadow: rgba(0, 0, 0, .25) 0 3px 2px 0;
position: relative;
z-index: 10;
}
Before I explain what we've done with the
box-shadow
property, notice that we've also
positioned the
<header>
element relatively and added a
z-index
value of
10
. This is the
same
z-index
setting we added to the
.logo
element.
After adding the box shadow without the z-index setting, you'll see that the shadow doesn't
overlay the image. This is because the big promo image appears after the
<header>
in our
HTML, thus overlapping it. Adding the new z-index declaration fixes this problem. Also,
since the
.logo
element is actually a child of the
<header>
, we can remove the z-index
declaration from that rule set, since all elements inside the
<header>
will have the same
z-index value as the
<header>
itself.
This is the kind of situation that happens often during a project: you'll add one or more CSS
properties to an element and those new properties will make other existing properties redund-
ant, or ineffective. So try to keep a mental note of the properties you're adding throughout
your project, and remove any redundant code.
The
box-shadow
property accepts up to six values. Here are those values in detail:
• a color value (RGB, HSLA, hex, etc), which defines the color of the shadow
• a horizontal offset (set with a length value)
• a vertical offset (length)
• Blur (a length value defining how blurry the shadow should appear)
• Spread (length defining how far the shadow should spread)
• An optional
inset
keyword is also allowed, which tells the browser to place the
shadow on the inside of the element, rather than outside it.
