CSS Transparency – full overview
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:
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:
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:
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:
As we can see – this working only for text objects. Here are used HTML code:
<div id="sample4"> <div>Fifth sample using different methods</div> <img src="globe.jpg" alt="jpg image" title="jpg image" /> <img src="lens.png" alt="png image" title="png image" /> </div>
And CSS styles:
#sample4 { width:400px; height:400px; background:url(back.jpg) no-repeat; border:2px solid black; padding:20px; } #sample4 div { padding:20px; font-size:18px; font-weight:bold; margin-bottom:10px; background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60FFFFFF,endColorstr=#60FFFFFF); } #sample4 img { background:transparent; 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:
Here are HTML code of our example:
<div id="sample5"> <div>Fifth sample using different methods</div> <img src="globe.jpg" alt="jpg image" title="jpg image" /> <img src="lens.png" alt="png image" title="png image" /> </div>
And CSS styles:
#sample5 { width:400px; height:400px; background:url(back.jpg) no-repeat; border:2px solid black; padding:20px; } #sample5 div { padding:20px; font-size:18px; font-weight:bold; margin-bottom:10px; /*background: rgba(255, 255, 255, 0.6); for future */ background:#FFF; filter:alpha(opacity=60); -khtml-opacity: 0.6; -moz-opacity:0.6; opacity: 0.6; } #sample5 img { /*background: rgba(255, 255, 255, 0.6); for future */ filter:alpha(opacity=60); -khtml-opacity: 0.6; -moz-opacity:0.6; opacity: 0.6; }
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!