Backgrounds, Borders, and More - Jump Start CSS - page 89

Adding Shadows to Small Images
Whereelsedoweneedtoaddshadows?Theimagesinthe“Latest Recipes” sectionalsohave
drop shadows. Let's add a shadow to our images, changing the values for the shadow to ac-
commodate this smaller set of elements:
.media img {
float: left;
margin-right: 30px;
border: solid 9px #ede0d5;
box-shadow: rgba(0, 0, 0, .25) 2px 2px 2px 0;
}
For this drop shadow, we've added a 2px horizontal offset (the first value after the color) and
we've reduced the vertical offset by one pixel. This gives us just about the look we want;
very similar to the original Photoshop mock-up.
Adding Shadows to Buttons
Finally, we have one more set of items to which we need to apply a box shadow: the two big
"cook it now!" and "discover more recipes" buttons.
At this point, we haven't yet added any styles to our button elements, so they look rather
plain, consisting purely of text. Later we're going to style those buttons with gradients and
add the correct font, but for now, let's just add a height and width, a temporary background
color as a placeholder, and the necessary box shadows:
.promo-btn {
display: inline-block;
width: 208px;
padding: 13px 0;
background-color: #6c0733;
box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
}
Notice we're using the display property with a value of inline-block . As discussed in
Chapter 2 , all inline and inline-block elements are subject to text-based properties. So, this
will help us to center the element later when we start styling our text.