17
Controlling Opacity and Visibility
WHAT YOU WILL LEARN IN THIS CHAPTER:
- How to modify the opacity of an element
- How to set the visibility of an element
The last CSS I will teach you is how to change the opacity of an element, that is how transparent an element is, and also how to set the visibility of an element, allowing you to hide it from view.
THE OPACITY PROPERTY
First, you'll look at the opacity property; it has a very simple syntax, as you can see from the following table.
| PROPERTY | VALUE |
| opacity | <number>Initial value: 1 |
An opacity value of 1 indicates that an element is fully opaque. An opacity value of 0 on the other hand makes the element completely invisible. You can specify opacity to two decimal places.
NOTE All major browsers, except IE 6, 7, and 8, support the opacity property. There are proprietary methods of setting opacity in IE versions less than 9 that I won't cover here, but see Appendix B for links to more information.
You should make sure that transparency is an optional part of the visual design, so that users of modern browsers are rewarded with a prettier visual experience, but the site remains attractive and usable in older browsers.
Let's Try It Out!
TRY IT OUT Using the opacity Property
Example 17-1
To demonstrate the use of the opacity property, follow these steps.
- Enter the following markup:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML ...
Get Beginning CSS: Cascading Style Sheets for Web Design, Third Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
