HTML and CSS Reference
In-Depth Information
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
Search WWH ::

Custom Search