Opacity Using Css Only...

[web_designer 7]

W3C SAYS

Opacity can be thought of conceptually as a post processing operation. Conceptually, after the element (including its children) is rendered into an RGBA off screen image, the opacity setting specifies how to blend the off screen rendering into the current composite rendering.

So, how we use opacity:
Simply, we use alpha(opacity=number) This number must be between (0.0-1.0)

Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is the alphavalue.

Therefore, if you want to see the entire image, it will be opacity:1.0; Without any filters applied to the opacity of an image is 1.0 (fully opaque).

For CSS opacity to work in the browser it must have some placement specified. We used float:left; and that worked. Now we are trying position:relative; and that works too, but only in Mozilla Firefox. Also we use opacity as shown below

25,50,75 and 100 which will give us four different levels of opacity .

Finally,Here is an example to see the opacity gradient from 0.0 to 0.1. you can add this code to any image and see the difference between them.

<div style="width:250px;margin:0 auto;"> <span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;"><img src="your image" width="50" height="50"></span><span style="float:left;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;"><img src=" your image " width="50" height="50"></span><span style="float:left;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;"><img src=" your image " width="50" height="50"></span><span style="float:left;filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;"><img src=" your image " width="50" height="50"></span></div>

[Jonnyabc 0]

Thanks for posting this! However, while I was sort of aware of this feature, I have thus far tried to steer clear of it because of computability issues. Could anyone please verify if this is (still) true? Last I messed with it was about a year ago, and a lot can change within a year.

[BuffaloHelp 24]

Keep it simple, when possible.

If you can create the image with opacity built-in, i.e. PNG, you should always opt to do so.

I believe IE8 supports PNG even in transparency mode. For some reason, my IE7 supports it as well.

Test your transparency using this site http://entropymine.com/jason/testbed/pngtrans/

If you can do transparency, you can adjust to your opacity.

While there are people still with IE6 or even older, Yahoo, Bing, MSN have been very successful at alerting the changes and converting many users. And as people buy newer PC's this year, hopefully opacity would not be an issue. Just the other day Google announced that they will stop supporting for IE6 or older. If Google is dropping the support for older browsers it's safe to say that you can start coding for IE7 or higher compatibility.

[Quatrux 4]

I still think, if you want to be cross browser compatible, you just need to use a PNG image with an opacity, because doing it with a browser, won't work for everyone who visit your site :angel:And of course, not on all browsers transparent or with opacity value PNG images work, so also you need to include different hacks. :/

[web_designer 7]

Thanks for posting this! However, while I was sort of aware of this feature, I have thus far tried to steer clear of it because of computability issues. Could anyone please verify if this is (still) true? Last I messed with it was about a year ago, and a lot can change within a year.

i can assure you that this css work in firefox, opera, and maybe the earlier versions of internet explorer. in internet 6 , it showed opacity but after i activated the blocked contents. you can test it yourself if you want, it works for all of them.