Transparency is a very common design element that is used on many websites today. However as web-developers, we know that getting the desired effect with CSS is not as simple as it sounds. It is not like adjusting the opacity in Adobe Photoshop or Illustrator. There are actually many hoops that we would need to jump through to achieve the desire look. You might think of “opacity” or a 24-bit PNG file when you hear the word transparency, but those have their own issues when used.
The Issue with CSS opacity:
The problem with using opacity to create a transparent background, apart from the several line of CSS syntax to cater to different browsers, is that both the parent and child elements become transparent. It is possible to resolve this issue with additional lines of CSS and HTML mark-up, such as using extra div’s, positioning and such but that just adds a whole lot of junk to the file.
The Problem with 24-bit PNG file:
The problem with 24-bit PNG file is that not only is it not supported in IE, the file size is much larger than a just creating transparency with CSS.
So here is the SOLUTION! RGBa!
RGBa allows you to declare your regular RBG values plus an alpha value to control the level of transparency. So this is how it would look:
.opacity50 {
/* fallback for IE that does not support RGBa*/
background: rbg(255, 255, 255);
/* 50% opacity */
background: rgba(255, 255, 255, 0.5);
}
A better fall back for IE
.opacity50 {
/* For IE 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000);
/* For IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)";
}
Okay, so let me explain what I did above and how it works. Filter is a proprietary CSS extension added by Microsoft back in the year 2000. There are many other filters that are available, which I will talk about later in another post. The gradient filter, have a start and an end hex color both of which have its own independent alpha channel. The first 2 digits are the alpha and the last 6 digits are the hex value.
So first we will have to convert our level of transparency to as hex value. There are 2 ways to do this:
- is open up console in Firebug and type in “Math.floor(0.5 * 255).toString(16);”(replace “0.5″ with your transparency value).
- you can go to http://www.statman.info/conversions/hexadecimal.html to convert your transparency level it to a hex value there.
Both option will get you your a hex value.
Your final code should look like this:
.opacity50 {
/* For IE 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000);
/* For IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)";
/* 50% opacity */
background: rgba(255, 255, 255, 0.5);
}
There you go! Now you have a transparent background that does not effect the child elements. Also the best part about this is that since Microsoft released the Filters in 2000, this method works on all browsers.