Change the Opacity of Colors in Web Design - dummies

Change the Opacity of Colors in Web Design

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.


In the example shown, the background of the menu was made a transparent gray rather than the solid gray used in the same design shown in this figure.


The opacity settings in CSS 3 provide a great deal of flexibility with the option to use an RGBa color and to specify the amount of transparency.