Guide to: Using Transparency (Opacity) In Web Design

By . Filed in Web Design

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, that includes going back a couple of years to see how it’s 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 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, these 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, 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 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 differently 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) and to make things easier you can use this tool, Web-Color Convertor, to convert RGBa as well as other color formats to #RGBA.

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

Which is the best?

In short, it depends. All the practices above work, but every website has its own limitations. So it is now up to you to make a decision, as web developers and designers, which practice is better suited to your site? And, to get you inspired, we have gathered below a few examples of transparency implemented with the practices we have discussed earlier in this post.

Using transparent PNG

Envato

Twitter

WWF

Using Opacity property

Awwwrds

Using Alpha Channel

Behance

About.me

Author:

Thoriq is a writer for hongkiat.com. He has been dabbling in Web Design for 7 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.com.

Advertisement