Opacity: dive into RGBA

Blog

Being able of layering semitransparent colours can highly increase the options available when it comes to design a website. It gives you a new powerful tool to put your creativity in practice.

Alpha transparency is the ability for colours to have different levels of opacity. So far, we’ve had two different options available to assign an amount of transparency to a specific element: using PNG images or adopting the opacity property.

PNGS

The PNG format supports an alpha channel and, therefore, can be used as a background image to create semitransparent backgrounds. For instance, you could create a 1×1 px green PNG image with a 0.5 transparency and set it as a repeated background of a paragraph.

In this sample our paragraph has a 1×1 px green PNG image with a 0.5 transparency set as repeated background. The result is a semitransparent background which works great on every browser apart from IE6.

This is the relevant CSS bit for the sample above:

p {background:url(rgba-bg.png) 0 0 repeat}

This will perfectly work in Firefox, Safari, Opera and Internet Explorer 7 and 8. You could also use some JavaScript if you need to implement transparent PNGs on IE6. This means that you could potentially get full browser support using PNG images to get semitransparent backgrounds in your websites.

The downside here is that, as we are dealing with images, if you want to change colour or level of transparency you need to recreate your images from scratch. This would be ok if you have just one or two images with transparency on them, but what if your design includes quite a number of semitransparent elements? Any change will become quite annoying and time consuming, won’t it?

The opacity property

The opacity property is a CSS3 property that allows you to set a level of transparency directly to a particular element in your CSS file. The amount of transparency can vary between 0 (fully opaque) and 1 (fully transparent). For example, you could set a 0.5 transparency to a paragraph with a green background in order to get a 50% level of transparency.

In this case, instead of using an image, we are using a plain green background (#7cb01e) and we’ve set the opacity property to the <p> tag in order to get a 50% transparency. As you can see the text becomes transparent too! This sample works fine on Firefox 1.5+, Safari, Opera 9+.

This is the relevant CSS bit for the sample above:

p {background:#7cb01e;opacity:.5}

Opacity seems to be a better solution than PNG because you can then change the opacity level by simply modifying a numeric value in the CSS file, instead of having to recreate all the PNG images.

The drawback with this method is that the opacity property will affect the paragraph background and all its elements. This means that, not only the green background, but also the text wrapped in the <p> tag and any other element contained in it will be 50% transparent.

Sometimes this can be the effect you’re looking for, but some other times it might not!

RGBA

Everybody knows what RGB is. It stands for Red, Green and Blue and it is a colour model that allows you to specify a colour by using three numeric values separated by commas.

In this third sample we’ve simply set a plain background to our paragraph using the RGB value for the shade of green with no opacity that we’ve used in the samples before (#7cb01e).

This is the relevant CSS bit for the sample above:

p {background:rgb(124,176,30)}

RGBA, which stands for Red, Green, Blue, Alpha, is just an extension of the RGB colour module that gives you the chance to specify the opacity level of a colour. As per the opacity property, the alpha value has to be a number between 0 and 1. At a first glance, you might think that opacity and RGBA work the same way, but at a closer look you’ll find out that there is a big difference. While the first one affects the transparency of the element and any other element in it, RGBA affects the transparency of the element only. This means that if we set a 0.5 alpha value to our paragraph’s background, its text will remain fully opaque!

This sample shows RGBA in action! We’ve simply added the alpha value to the RGB value we’ve used in the previous sample. RGBA works in Firefox 3+, Safari, Opera 10+.

This is the relevant CSS bit for the sample above:

p {background:rgba(124,176,30,.5)}

As it goes for the opacity, since we’re not using any images to create the transparency effect, we can easily change the colour or the amount of transparency by simply editing the CSS.

For all these reasons RGBA could definitely be considered as a possible solution to the alpha transparency matter, more powerful and easy to maintain than PNGs and opacity.

Current support for RGBA is in Firefox 3+, Safari, Opera 10+, not that different from support for opacity (Firefox 1.5+, Safari 1.2+, Opera 9+). This means that both RGBA and opacity will only work on forward-thinking browsers. Internet Explorer, obviously, offers no support at all for these properties. Nevertheless, if we think at them as what has been called “progressive enrichment” we could definitely start using them in our projects while offering a solid backup for challenged browsers like Internet Explorer:

p { background:#bdd78e /* for IE  */
    background:rgba(124,176,30,.5)
}

Internet Explorer will read the first background rule and totally ignore the second one with the alpha value.

Playing with RGBA

As I said, RGBA cannot just be used for backgrounds but also to set transparency on normal colours. For example you could blend a simple text with its background by setting an alpha value on the text colour.

p {color:rgba(0,0,0,.65)}

In this way you can get a very nice effect where the text gracefully blends with the background colour, creating a harmonious and soft palette for your website!

Here you can see how you can use RGBA to blend a text with its background. The text colour is turned to green.

Using RGBA, you could also obtain a simple hover treatment for your links, producing a lighter shade of your link’s colour.

This sample shows RGBA in action on links! We’ve simply set an alpha value to the hover state of the link element reducing its opacity by 25%.

This can easily be done by decreasing the opacity of the link’s colour as showed in the code below:

a {color:rgb(190,7,0)}
a:hover {color:rgba(190,7,0,.75)}

Conclusion

Opacity opens up a whole new set of possibilities for web designers and can make your websites way more impressive and easy to maintain. If the concept of progressive enrichment is something you embrace and if you’ve already managed to convince your clients that websites do not have to look the same in every browser, then there’s no need to keep waiting!

Start playing around with RGBA right know, while providing functional and solid fallbacks for older browsers. Give the forward-thinking browsers what they deserve enhancing users’ experience!

Posted on Tuesday 19 January 2010 at 13:54

2 commenti all'articolo

  1. Dawn says:

    Thank you for your example. I couldn’t get it to work with another website’s instructions but I was able to get it working with your instructions so again, thanks! …having fun learning HTML5 :)

  2. Tim says:

    Enjoyed your article on rgba. Clear and concise with good examples.

    However, I can’t get it to work on text in IE7.

    Example:

    text

    .txt {
    color: #f00;
    color: rgba(255,0,0,.5);
    }

    The text should be red at 50% transparency but in IE 7 it is rendered as black.

    Any ideas why?

    Tim
    Seattle, USA

Leave a comment

Please rate this article and help us plan future posts. Comments are moderated. Do not spam for any reason. Ever!