CSS3 opacity

09.Aug.2010

Until recent, not many of CSS3 properties have been used. There is one function though that has been used a while: opacity. To use opacity on your website, you should setup opacity property in your CSS file, like shown in snippet.

1
2
3
4
5
div.my_box {
	opacity: 0.5;
	width: 100px;
	height: 100px;
}

Opacity property is not supported in IE, so in order to use it in IE, you should use following:

div.my_box {
	filter: alpha(opacity=50);
}

Fully functioning example of CSS3 opacity is shown below:

1
2
3
4
5
6
7
8
div.my_box {
	/* CSS3 opacity */
	opacity: 0.5;
	/* IE opacity */
	filter: alpha(opacity=50);
	width: 100px;
	height: 100px;
}