Tutorial :Opacity in web pages?



Question:

I keep seeing 60-80% opacity on tables on websites. They look really cool, but I'm not sure why they are doing it. Is it Javascript, or is it an image? How do I change the opacity of a table?


Solution:1

You can do it in CSS, but it requires a little hacking to get it to work cross-browser.

selector {      filter: alpha(opacity=50); /* internet explorer */      opacity: 0.5;           /* fx, safari, opera, chrome */      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /*IE8*/  }  


Solution:2

IE uses the syntax filter:alpha(opacity=80), where a lower value makes the element more transparent, while Mozilla uses -moz-opacity:0.8 where a lower value has the same effect on transparency. The same things goes for the CSS3 valid syntax opacity:0.8;

So these are the three CSS properties that you need.

filter:alpha(opacity=80); //IE

opacity: 0.8; //CSS3

-moz-opacity:0.8; //Mozilla


Solution:3

Opacity can be specified in CSS, but it's not supported by all browsers (specifically older IE)


Solution:4

You can also create a 1x1 pixel 32 bit PNG image which is for example a black square with the opacity you require. Then in your css you can do...

element  {      background: url(/Images/Transparent.png) repeat;  }  

This way you can avoid all the different hacks. You may have problems with Alpha transparency in IE6 but there are ways around this also


Solution:5

It can be done both ways, I prefer an alpha transparent png file as a background. Doing an alpha on the table makes the actual contents semi-transparent as well. See the other answers for the css values.


Solution:6

If you want a broad 'cross browser' solution, except for IE6 (totally deprecated), this will always work:

div {      background-image: url('opacity.png');  }  

With "opacity.png" being a 1px x 1px transparent PNG24

It does generate one extra request to your server, but in most cases, it's totally affordable.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »