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.
Search WWH ::

Custom Search