HTML and CSS Reference
In-Depth Information
right;
}
To position the shadow image (called bg-column.png), we'll use the "
top
" and "
right
"
keywords, which you'll recall from our discussion on backgrounds earlier in this chapter.
This positions the image at the top right of the
.latest
section, giving us the look we want.
What about text shadows?
The design for RecipeFinder doesn't incorporate any shadows on text, but if you want to ap-
ply shadows to text in your projects, you can do this easily using the text-shadow property.
The syntax for
text-shadow
is very similar to
box-shadow
.
Let'saddatext shadowtothe“Latest Recipes” heading text sowecanseehowitwouldlook.
Here's the CSS:
h1 {
text-shadow: rgba(0, 0, 0, .6) 5px 5px 4px;
}
Figure 3.18
shows us how this shadow will look on our page.
Figure 3.18. A temporary shadow added to heading text
As mentioned, this shadow is not part of the original design, so we won't be keeping it. The
text-shadow
property works exactly the same way as the
box-shadow
property, except
