Code

Web Design Tips: Use CSS to Adjust Opacity

The CSS opacity property lets web designers define how particular page elements will blend, adding both style and emphasis to important page sections.

Essentially, this property allows you to adjust an element’s translucency, changing the amount of diffused virtual light that seems to pass through a paragraph, image, or other page element. In this Web Design Tips, I will briefly discuss browser compatibility for this property, and then I’ll show you how to use the CSS opacity property to add emphasis to a product description.

Using the CSS Opacity Property Video

Browser Incompatibility

The World Wide Web Consortium (W3C) establishes web coding standards like the CSS opacity, but for a variety of reasons not every browser supports every property that the W3C defines. For example, no version of Internet Explorer (IE) will properly render the opacity property (included the newly release IE8) and Opera had issues with this property before version 9.0.

But have no fear, we’ll use a couple of short workarounds to get our effect to work in every major browser. These workarounds add a few lines of code, but are very manageable.

The CSS3 Code

In CSS the opacity property requires at least three pieces of information. First, we have to identify some page element or tag (<p>, <div>, or <div id="some-css-id">). In your style sheet, this first bit (the selector) is followed by a set of braces.

<code>   #some-css-id{}
</code>

Next, we need to specify the opacity property by simply typing “opacity:” in to our style sheet.

<code>  #some-css-id{ opacity:}
</code>

And finally, we need to add an alpha value, which describes how opaque or transparent our element will be. The alpha value is measured in a range from 0.0 (completely transparent) to 1.0 (completely opaque). So, an alpha value of .5 is right in the middle of the range. Now the code in our style sheet should look like this:

<code>   #some-css-id { opacity: .5;}
</code>

The Filter Alpha and -moz-opacity Solutions

As I mentioned above, not every browser recognizes this brief and elegant property, so we need to add one or two more properties to ensure that the most popular web browsers will understand how to handle our element’s opacity settings. The first of these is the filter: alpha property for Internet Explorer. To get opacity in IE, we have to add this additional property. Like the CSS3 opacity property, we need to include a range. For filter:alpha that range runs from 0 (completely transparent) to 100 (completely opaque). So, for semi-transparency, the code in our style sheet will now look like the following:

<code>   #some-css-id { opacity: .5; filter: alpha(opacity=50);}
</code>

This next workaround, the -moz-opacity property, has been optional since 2004 when the last browsers using it were updated to include the W3C standard, but I mention it here for the sake of being thorough. This property works exactly the same way as the opacity property and is compatible with early versions of the Safari browser (before version 1.2) and the Firefox browser (before version 0.9). The Mozilla folks, who originally developed the -moz-opacity property, have officially asked designers and developers to stop using it, but some still do.

<code>   #some-css-id { opacity: .5; filter: alpha(opacity=50); -moz-opacity: .5;}
</code>

Using the Opacity Property to Emphasize a Product Description

There are dozens of ways to use this property in general page layout, as part of some nifty navigation, or to blend backgrounds. For our purposes, we’ll add a nice background emphasis effect to the product description section of an ecommerce page.

Setup the Basic Code

Let’s start with some basic CSS, creating an ID selector (#wrapper) that we’ll use in conjunction with a <div> tag to encompass our product image, product tile, and product description. Here is the CSS:

<code>  #wrapper {margin: 0px auto; width: 950px;}
</code>

And now the HTML:

<code>   &lt;div id="wrapper"&gt;&lt;!--This is the #wrapper--&gt;
  &lt;div id="image"&gt;&lt;!--This is a div for our product image--&gt;
  &lt;a href="wooden-fruit-sp1.png" title="wooden spoon"&gt;
   &lt;img src="wooden-fruit-sp2.png" alt="wooden fruit spoon" /&gt;&lt;/a&gt;
  &lt;/div&gt;&lt;!--This ends our product image div--&gt;&lt;!--This div holds the product title and description--&gt;
  &lt;div id="product"&gt;&lt;h1&gt;Wooden Fruit Spoon&lt;/h1&gt;
     &lt;p&gt;Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum. &lt;/p&gt;
   &lt;img src="add.png" /&gt;
   &lt;/div&gt;
   &lt;/div&gt;
</code>

We could simply add our opacity property to the #wrapper selector, but more than our background would become semi-transparent. The product image and text would also change. So, we are going to create a second ID selector and name a second <div> in our HTML. Take a look at the updated CSS:

<code>  #wrapper {margin: 0px auto; width: 950px;}
  #wrapper-sub { margin: 0px auto; width: 1000px; height: 350px; background-image: url(wooden-fruit-sp3.png); border: 1px solid #000000;}
</code>

Now, I’ve created the selector #wrapper-sub. In that selector, I set the width to be larger than our #wrapper selector, so that there will be a bit of empty space around the product information. I added a height property because I am going to leave the <div> element empty in my HTML, and I added a background image and border.

I also added a new <div> in to my HTML. You’ll see it right at the top of the code:

<code>  &lt;div id="wrapper-sub"&gt;&lt;/div&gt; &lt;!--HERE IS THE NEW CODE--&gt;
  &lt;div id="wrapper"&gt;&lt;!--This is the #wrapper--&gt;
  &lt;div id="image"&gt;&lt;!--This is a div for our product image--&gt;
  &lt;a href="wooden-fruit-sp1.png" title="wooden spoon"&gt;
   &lt;img src="wooden-fruit-sp2.png" alt="wooden fruit spoon" /&gt;&lt;/a&gt;
  &lt;/div&gt;&lt;!--This ends our product image div--&gt;&lt;!--This div holds the product title and description--&gt;
  &lt;div id="product"&gt;&lt;h1&gt;Wooden Fruit Spoon&lt;/h1&gt;
     &lt;p&gt;Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum. &lt;/p&gt;
   &lt;img src="add.png" /&gt;
   &lt;/div&gt;
   &lt;/div&gt;
</code>

The CSS Opacity Property

Now, I add the opacity property and filter:alpha workaround to my style sheet:

<code>  #wrapper {margin: 0px auto; width: 950px;}
  #wrapper-sub { margin: 0px auto; width: 1000px; height: 350px; background-image: url(wooden-fruit-sp3.png); border: 1px solid #000000; opacity: .5; filter: alpha(opacity=50);}
</code>

Position the Elements

If I stopped right here, I would have two <div> elements stacked vertically on my page, not the effect I wanted. I need to add some CSS positioning and layering to get my desired effect:

<code>  #wrapper {position: relative; z-index: 2; margin: 0px auto; width: 950px;}
  #wrapper-sub {position: fixed; z-index: 1; margin: 0px auto; width: 1000px; height: 350px; background-image: url(wooden-fruit-sp3.png); border: 1px solid #000000; opacity: .5; filter: alpha(opacity=50);}
</code>

The CSS position properties inserted into both selectors will cause the two <div> elements to overlap, and the z-index property tells the browser which <div> to put on top. With these properties added we have a great CSS opacity effect on our product page.

Resources

Armando Roggio
Armando Roggio
Bio   •   RSS Feed


x