CSS Transparency – A Detailed overview

CSS Transparency – A Detailed overview

0 35270
CSS Transparency – A Detailed overview

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:

First sample using ‘opacity’ css property to set transparency

jpg image
png image


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

jpg image
png image

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

jpg image
png image

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

jpg image
png image

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:

Fifth sample using different methods

jpg image
png image

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!

SIMILAR ARTICLES


NO COMMENTS

Leave a Reply