How To Set CSS Opacity For Cross Browser?

Many designer are using opacity in there web templates and design to make a new look but they fail while to be in cross browser. As everyone just knows about
“opacity: 0.5;” that is also a code but for new browsers only. If you want to play and show your design on your old browsers then you have to be old too.

For old browsers, many designers start using a transparent image for opacity but that are hard to coding and also eat space and can increase load time. So for this we have a list of CSS codes that are used for opacity in all browsers so use these to show opacity on all browsers perfectly.

Features:

1.) No Need To Use Image.
2.) Pure CSS Codes.
3.) Changeable Opacity.
4.) Old Browser Support Also.
5.) Cross Browser Supported.

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

Now there is another trick also that you can use background color as pre transparent like “background-color:rgba(0, 0, 0, 0.5);” but this will effect on background color only no on its inner data. So now you have ll ways./ Do what you want to do in you template.

Customization:

You just have to change opacity value from 0.1-1.0 only that you know better.

Last Words:

This is what we have for designers. So if you liked it then share it and leave your feedback. If you have quires then feel free to ask us.