O'Reilly logo

Beginning CSS: Cascading Style Sheets for Web Design, Third Edition by Richard York, Ian Pouncey

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

images 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.

  1. Enter the following markup:
     <!DOCTYPE html PUBLIC “-//W3C//DTD HTML ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required