Mário Andrade

The big issue with the opacity property is, of course, IE support. For this you have to use MS Filter and alpha property: filter:alpha(opacity=value), for all other browsers just use opacity: value.
Before I get started with this there are a few things you need to know:

• The CSS opacity property values run from 0 to 1 meaning you can apply opacity of 0, 0.1, 0.2, 0.3… up to 1.
• When you apply opacity to a block, all elements inside that block will have the same opacity. Let’s say you have a block with 4 images inside. If you apply 0.5 opacity to the block, all 4 images will have 0.5 opacity as well.

Simple Opacity

The following image is from my personal Flickr account, it’s actually the first photo I took in 2009 and also the view from my balcony. Great view isn’t it?

For this example I applied a 50% opacity to the image using the opacity and filter:alpha properties. If you look into this page source code you’ll find:

<img src="http://farm4.static.flickr.com/3083/3160497654_ee19062980.jpg" width="500" height="375" alt="CSS Opacity" style="opacity:.5; filter:alpha(opacity=50);" />

Opacity change when mouse is hover the image

This example can be a bit tricky. I’m going to use some javascript to manage the hover effect and share the CSS code.

Again if you look to this page source code you’ll find:

<img src="http://farm4.static.flickr.com/3083/3160497654_ee19062980.jpg" width="500" height="375" alt="CSS Opacity" style="opacity:.5; filter:alpha(opacity=50);"  onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" class="imgOpacity" />

What I’ve done was use some javascript to change the image styles when the mouse is on top of the image and when it’s out. But since we don’t want this, it’s preferable that you use CSS. Notice I applied a class to the image called imgOpacity, this is only for tutorial purpose.

.imgOpacity {
opacity:.5;
filter:alpha(opacity=50);
}
.imgOpacity:hover {
opacity:1;
filter:alpha(opacity=100);
}

Just add this to your styles and apply the class to whatever you wish and you’ll have a rollover effect.

This block of text will change opacity when you run your mouse over it.

You may also use opacity on divs in order to create semi-transparent backgrounds which can be great when used correctly.

Multi-browser support of opacity

Like I mentioned the CSS Opacity Property is supported by all modern browsers. We’ve covered Internet Explorer’s exceptional case but previous versions of Opera and Firefox and other browsers may not render the opacity property correctly. For that you’ll need to apply some special properties:

-moz-opacity
-moz-opacity is needed for previous versions of Mozilla Firefox and Netscape browsers. Just apply -moz-opacity:value; and you are set.

Ex: -moz-opacity:0.5;

-kthml-opacity
-khtml-opacity will allow older versions of Safari (1.x) to recognize the opacity property. it’s used in similar way of -moz-opacity. It’s actually been deprecated since 2004 but if people still use IE6, some will probably use Safari 1.x. Personally I wouldn’t bother with this too much.

Ex: -khtml-opacity:0.5;

IE6 and 7 support
Unfortunately Internet Explorer can’t play along with the rest of the browsers. There are some known bugs in versions prior to IE8 that will not display opacity even though you use filter:alpha(opacity=value). I advise you to try and specify height and width of the element you want to apply the opacity to, it works many of the times. if that doesn’t do the trick I suggest you try applying the “ever so friendly” Microsoft filter hacks:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:alpha(opacity=50);

Curiously when you use IE7 and IE8 works just fine but when you use IE8 as IE7 if you don’t use the hacks the Microsoft browser will not recognize opacity.

Interesting readings:

• Chris Coyier from CSS Tricks wrote a very interesting article on the subject called
  CSS transparency settings for all browsers. I advise you to read it and read the comments as they carry very useful information.
• The W3C article on CSS opacity subject. A quick and interesting reading.

All you need is to add an empty <span> tag that will hold the PNG image with the gradient and overlay the text. This css trick is supported by al modern browsers like Firefox, Safari, Opera and IE7 or higher.

Putting it together

HTML

<h1><span></span>Some text you want</h1>

CSS

The key to secure this trick is applying the css property position:relative; to the <H1> tag and position:absolute; to the <span>. The span will need to have the same width and height as the <H1>:

h1 {
    color#222;
    position:relative;
}
h1 span {
    position:absolute;
    width:100%;
    height:40px;
    display:block;
    background: url(text-gradient.png) repeat-x;
}

And there you have it. Check out the demo of CSS Text Gradient Effect to see the code in action. This technique does not allow the user to select of click on the text since the PNG image will overlay it they will be clicking on the image.

1. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using – An interesting tutorial about building HTML5 web pages and improving them with CSS3.
2. CSS3 Opacity – Using Opacity on images and text with CSS3
3. Introducing the CSS3 Multi-Column Module – How to use the new W3C multi-column module.
4. Rounded Corner Boxes the CSS3 Way – CSS3 Finally adds the ability of creating rounded corners easily
5. CSS3 Attribute selectors – How to use attribute selectors to better customization.
6. Styling Forms with Attribute Selectors – Complementary tutorial for CSS3 Attribute Selectors
7. Using CSS 3 selectors to apply link icons – An interesting tutorial to help improve web accessibility by applying different styles to certain selectors link lang, application and so on.
8. A mock-up interface using CSS3 Colour – A complex example of how to use CSS3 Color skills and Opacity. The result is very interesting.
9. Tooltips with CSS3 – How to create tooltips using only CSS3 pseudo elements :before, :after, :hover and css property Content to fetch image title and display it as tooltip text.