RGBA and Opacity using CSS3

RGBA and Opacity features allow developers to create a tint or transparency value on an image or an object on their web interface. RGB has previously been supported in CSS; however, there is now an additional value which is the 'A' or alpha. So, when you set an RGBA value you will be setting Red, Green, Blue, and the Alpha value. We will begin by first of all showing the Opacity feature in CSS. As a demonstration we will apply these features to the following image:

Okay now by applying the following CSS values to the image object:

.image
{
	 filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

The image will now end up looking like this:

In this example we had specified for this object to only be shown up to 50%, we can choose any opacity amount to the object as desired. We have added a transparency value of 50%, so if there were any other elements behind this image block, then they would be visible through this object by 50 percent.

Okay, now lets try the RGBA feature. By applying the following CSS values to the image object:

.image
{
	 background: rgba(255, 99, 0, 1);
}

The image will be displayed like the following:

Alternatively if we were to give the Alpha value say 0.5 which would be 50% the rgb colors would only be shown with 50 percent transparency. The Alpha value ranges from 0 to 1. Finally applying these CSS values to the image object:

.image
{
	 background: rgba(255, 99, 0, 0.5);
}

Will result in the following:

So, just have some fun playing around with the RGBA and Opacity values used in CSS3. This is definitely a great feature for building some awesome and aesthetically pleasing web interfaces ;)

Our Amazing Sponsors