Today we will talk about CSS. And our article will about – how to make elements transparent. Proceeding from my experience I can tell that today we don`t have any cross-browser solution to apply transparency for objects. Each browser has own idea about a transparency. I will tell about all these methods in details, for each of browsers.
First method – using opacity property. This property has appeared in CSS3 and is at present supported by the majority of browsers (Firefox, Netscape 7, Safari, Opera 9). As value – value of a transparency from 0.0 (fully transparent) to 1.0 (fully opaque).
Example:
First sample using ‘opacity’ css property to set transparency
Unfortunately it doesn’t work in Internet Explorer till now. To use a transparency in IE we should use filters, like filter:alpha(opacity=60);. Values vary from 0(fully transparent) to 100(fully opaque).
Example of using:
Second sample using ‘filter:alpha’ for IE to set transparency
Here we start to note strangenesses, in IE7 a transparency was successfully applied to the image, but not to a text element. In IE8 all works normally in both cases.
We also can use -moz-opacity to support old versions of Netscape Navigator. Example:
-moz-opacity:0.6;
Plus, we can use -khtml-opacity to support old versions of Safari (1.x). Example:
-moz-opacity:0.6;
On our happiness, CSS3 presents us one more new method for transparency – via rgba function. It allow us to fill areas with transparency. At present supported by next browsers : Firefox 3.x, Google Chrome, Safary 3.x, Opera 10.x and seems even Internet Explorer 9. Here are example: background: rgba(255, 255, 255, 0.6);
First 3 digits – RGB color value, last one (from 0.0 to 1.0) – alpha (transparency) value.
Example:
Third sample using ‘rgba’ to set transparency
As we can see – our text much more readable than in first example. And all just because opacity property forces all descendant elements to also become transparent, but rgba – no.
And at last, we also can use another filter for IE8: progid:DXImageTransform.Microsoft.gradient.
Example:
Forth sample using ‘gradient’ filters for IE to set transparency
As we can see – this working only for text objects. Here are used HTML code:
2 | <div>Fifth sample using different methods</div> |
3 | <img src="globe.jpg" alt="jpg image" title="jpg image" /> |
4 | <img src="lens.png" alt="png image" title="png image" /> |
And CSS styles:
04 | background:url(back.jpg) no-repeat; |
05 | border:2px solid black; |
13 | background:transparent; |
14 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60FFFFFF,endColorstr=#60FFFFFF); |
17 | background:transparent; |
18 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60FFFFFF,endColorstr=#60FFFFFF); |
So, in result, what we can do to make it more cross-browsing? Right, we can apply all different possible properties together:
Fifth sample using different methods
Here are HTML code of our example:
2 | <div>Fifth sample using different methods</div> |
3 | <img src="globe.jpg" alt="jpg image" title="jpg image" /> |
4 | <img src="lens.png" alt="png image" title="png image" /> |
And CSS styles:
04 | background:url(back.jpg) no-repeat; |
05 | border:2px solid black; |
15 | filter:alpha(opacity=60); |
22 | filter:alpha(opacity=60); |
Conclusion
Transparency – very weird thing. And we should use necessary styles in different cases. For text, better to use ‘rgba’ as I think. Anyway, most of browsers will support this property soon. To support older versions – we always can use our result combination of styles. So about images. ‘Opacity’ and ‘rgba’ works well (and filters for IE), but, nevertheless, maybe using transparent PNG images will better? 🙂 I hope that our new lesson was useful for you. Good luck!
