CSS Code Hinting in Dreamweaver
How to Apply CSS3 Effects and Transforms in Dreamweaver
How to Create a Media Query in Dreamweaver

How to Apply Opacity/Transparency in CSS3

The opacity or transparency is a new effect in CSS3. Designers are really in the early stages of experimenting with this effect. In CSS3, transparency is defined by assigning a value to the opacity property. A fully opaque object completely obscures whatever is behind it; objects that aren’t fully opaque are partially see-through, or transparent.

Defining semitransparent backgrounds for page layout elements with CSS3 presents some exciting options for web designers. Semitransparent backgrounds are often used, for example, in drop-down lists. There, the drop-down menu elements have .5 opacity assigned (they are 50 percent transparent). As a result, the underlying page content remains visible when a menu drops down.


The opacity property is defined with a value ranging from 0 (completely invisible) to 1 (fully opaque; not transparent at all). So, for example, an opacity value of .8 makes an object 80 percent opaque, and so on.

The opacity property does not require prefixes for different browsers. The syntax is simple:

opacity: .x

The drop-down list shown, for example, is defined as such:

.menu_box {
      background-color: #999;
      padding: 2px;
      color: #333333;
      opacity: .5;
blog comments powered by Disqus
Create a New Style Sheet in the CSS Styles Panel
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Change Repetitive Backgrounds on CSS3 Sites
How to Create Hyperlink Styles with Pseudo-Classes in Cascading Style Sheets (CSS)
How to Work with CSS3 Selectors

Inside Dummies.com