Change the Opacity of Colors in Web Design

By Janine Warner, David LaFontaine, and Lee Andron from iPhone and iPad Web Design For Dummies

For years, web designers have been using transparency in websites by saving images in either the PNG or GIF format and making one color transparent. Although this method isn’t ideal, it has worked as a way to make images seemingly “float” on a page and to layer one image over another by placing an image in a page over a background image.

Thanks to CSS 3, you can now create transparent backgrounds and even specify different levels of opacity to create more subtle design effects for pages displayed on iPhone and iPad. You can use the opacity property with RGBa colors to create sophisticated transparency features in your designs, such as the transparent drop-down navigation list shown in this figure.

Changing the opacity of the background behind the drop-down list lets the image behind it show through and creates a more subtle design effect.