HTML and CSS Reference
The opacity property makes, not only, the element itself semi-transparent, but also everything
inside that element. And compounding this problem is the fact that there's no way to reverse
the transparency on the child elements without removing it from the parent. As you might
imagine, this is often an undesirable result.
In most cases, this can be resolved by simply using a different method of achieving trans-
parency (such as a PNG image or RGBA color), but it's good to know that this occurs, so
you can decide from the outset which transparency method is ideal. For example, the opa-
city property would be best used on an image inserted via the <img> tag whereas RGBA or
HSLA transparency would be more suited for a solid background color or transparency ap-
plied to text.
There are additional types of values you might come across, or find useful, (for example, ex,
pt, or deg). We don't have the space to go into all of them in detail here. Some will be covered
to a degree in later chapters, but for the most part, the values we've discussed in this chapter
are those you'll use most often.
Other values are useful in certain circumstances too, so try to become familiar with some of
those as well. If you're up for it, you can find a full list and explanation of each value in the
Adding Shadows to Elements
The RecipeFinder website is starting to show a little bit of color and style, but Figure 3.12
reveals what else is missing from our design.