Opacity in web design.

Opacity can add another dimension to your web developments. It is a useful tool to have but it can be problematic to use.

 

Adding opacity to an element is easy enough, you can add it in your style sheet:

 

.opacity{
opacity: 0.6;
}

 

The value of opacity is a value between 0 and 1, a value of zero is invisible and a value of one is completely solid. The value of 0.6 above will give the element a 60% opacity. We can specify this value to 2 decimal places so 0.61 is different to 0.62.

 

The above method will work in Opera, Mozilla and Chrome but Internet explorer will not recognise it.

 

In their wisdom the internet explorer team decided that they would stray from the norm yet again. To achieve opacity in IE you need to use filters.

 

For IE5 to IE7 you can use:

 

.opacity{
Filter: alpha(opacity=50);
}

 

For IE8:

 

.opacity{
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
}

 

This will work on all versions of internet explorer:

 

.opacity{
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
Filter: alpha(opacity=50);
}

 

Opacity without effecting child elements

These methods work fine but there is a major problem with them. The child element automatically adopts the opacity of the containing element. Meaning that anything that we place in our ‘.opacity’ element will also have a 50% opacity. That means any text, images, links…Anything we place inside the element will be 50% opaque. This is a big problem and often an undesirable effect.

 

Luckily there is an easy’ish way around it. You can use filters again and state the colors in RGBA format for firefox. You can use ‘gradient’ as below:

 

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000);

 

You are setting the start and end color to the same value and then setting an opacity.

 

Our style sheet will need to look something like this:

 

.opacity{
display:block;
height: 110px;
width: 450px;
/* For IE 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF, endColorstr=#80FFFFFF);
/* For IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF, endColorstr=#80FFFFFF)";
/* 50% opacity for mozilla */
background: rgba(255, 255, 255, 0.5);
}

 

At first glance it looks complicated but really it isn’t that bad. All those numbers in the filters are used for setting the color and the opacity levels of the element. We have used three different versions of the filters to cover us for most browsers.

 

HEX numbers when using filters

The color numbers are stated slightly differently when using filters, the value needs to be a hex value. #80FFFFFF is a hex value representation of color and transparency. The color is white, FFFFFF and the transparency is 80.

 

The first two digits (80) are a hex value for the opacity.

 

How do we convert our original transparency value of 0.5 into a usable hex value?

You multiply by 255 and then convert your value into a HEX value.

 

0.5*255 = 127.5, ROUND IT UP TO 128

 

How to convert 128 to hex? Hexadecimal is simply another number system except instead of having a base 10 it has a base 16. The numbers go from 0 to 9 and then instead of getting to ten and counting up again until twenty, you go from A to F:

 

0 = 0
1 = 1
2 = 2
3 = 3
4 = 4
5 = 5
6 = 6
7 = 7
8 = 8
9 = 9
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15
10 = 16
11 = 17
12 = 18

....And so on

 

So getting back to our value of 128 what does this equate to in HEX? You could continue the table and get to the value or you could calculate it…But the easiest way is to just open your scientific calculator on windows and input the decimal value, hit ‘HEX’ and it will show the value you need...80 in this case.

 

When you put it all together you will find that you can make elements opaque without effecting their child elements.

 

A complete example

First the style sheet:

 

.opacity{
display:block;
height: 110px;
width: 450px;
/* For IE 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF, endColorstr=#80FFFFFF);
/* For IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF, endColorstr=#80FFFFFF)";
/* 50% opacity */
background: rgba(255, 255, 255, 0.5);
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
margin-bottom:20px;
margin-top:20px;
}
p{
Margin:10px 10px 10px 10px;
}

 

 And the HTML:

 

<div class=”opacity”>
<p>This sentence won’t be opaque but the background will!</p>

 

</div>

 

And thats it!