Guide to: Using Transparency (Opacity) In Web Design

By . in Coding. Updated on .

Note: This post was first published on the 7th Jan, 2013.

Transparency is an effect that allows us to see what is underneath. In design, transparency could create the illusion of an area looking more spacious than it really is. If done right, it could even make the overall design look more elegant. In Photoshop, this effect can be easily achieved by decreasing the Opacity or Fill, but in website space, it is a different matter.

In this post, we are going to look into how this particular effect is evolving throughout the years in web space, which includes going back a couple of years to see how it was done prior to the emergence of CSS3.

IEpngfix – Old School

In the old days, Transparency effect is commonly done using transparent PNG, which is also known to have some shortcomings.

For instance, in Internet Explorer 6, transparent PNG will be rendered (really) ugly and although this case is solvable through this JavaScript library, if we only have a small portion of transparent PNG in our website, applying this library is quite unnecessary.

Another problem is when we add an image, we will also add more HTTP requests for a browser to process. When it comes to a lot of images, could slow down our website performance.

Pros
  • Relatively easy to apply when you are familiar with image editors like Photoshop
  • Wide browser support
Cons
  • Looks ugly in IE6
  • Brings extra HTTP request

The Opacity

There is an easier way to create transparency in a website, that is, by using opacity CSS property. This property is just officially included in CSS3, but the support coverage is wider than the other CSS3 properties in general. According to caniuse.com, opacity has been supported in as early as Firefox 2 and Chrome 4.

Now, Let’s take a look at the following example.

div {
	width: 200px;
	height: 200px;
	background-color: #fff;
	opacity: 0.5;	
}

This code will result in a white box with 0.5 or 50% transparency, the opacity notation range from 1 to 0 where 1 will make the element solid while 0 will make the targeted element completely invisible.

There are a few things you should remember, though, when applying opacity. This property will affect anything inside the element, let’s say we have some text in this box, and the text will also be transparent at 50%.

Also, in IE8 or earlier we need to substitute this property with filter, for example filter: alpha(opacity=50).

Pros
  • Easy to implement
  • Cross-browser support, (IE requires ‘filter’)
  • No HTTP request
Cons
  • Affecting the entire element as shown

The Alpha Channel

Another way we can take it is using the Alpha channel of RGBa and HSLa (which I consider to be better than the previous two practices). Unlike the opacity property which lowers the entire element’s opacity, the alpha channel only affects color density.

Let’s see this example below;

div {
	width: 200px;
	height: 200px;
	background-color: rgba(255,255,255,0.5);
}

We still have the same box, but we now replace the background-color with RGBa color function and lower the alpha channel to 0.5. This code will result in the same effect similar to what the opacity property did, but since the alpha channel basically only controls color density, the other elements inside it will not be affected.

In term of HSLa, it works no different except that the colors are composed from the Hue, Saturation and Lightness. If you have been working with Photoshop, this color function works similar to this window dialog below, from the Image > Adjustment > Hue/Saturation menu.

Pros
  • Easy to implement
  • No HTTP request
Cons
  • RGBa and HSLa will not work in Internet Explorer 8 and earlier

Filter Property – The IE way

It seems that Internet Explorer always takes a different route from the industry standard. As we mentioned above, RGBa or HSLa will not work in Internet Explorer (version 8 and earlier). Instead, the Internet Explorer oddly uses #ARGB with their exclusive filter property.

What is #ARGB? honestly I don’t quite get it either but it basically does not equal to RGBa on the surface. The RGB values range from 0 to 255 while the #ARGB is hexadecimal.

Here is how we can apply this color function;

div {
	width: 200px;
	height: 200px;
	background-color: rgba(255,255,255,0.5);

	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF);
	zoom: 1;
}

We are still dealing with the same box and this time we added filter and -ms-filter for IE. Notice this hex number #80FFFFFF, it is actually converted from rgba(255,255,255,0.5)

Pros
  • Works for Internet Explorer 8 and earlier
Cons
  • At the same time, it only works in IE
  • The syntax, as well as the color format, is not easily understandable
WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail