Controlling Overall Transparency of an HTML Element with the RGBA CSS3 Property
In this penultimate installment of a four-part series, you will learn how to use the rgba CSS3 property to change the overall opacity of all of the H2 headers coded in a sample (X)HTML document. This simple process demonstrates once again how flexible and versatile the property is when it comes to implementing alpha-based transparency effects on web pages.
Controlling Overall Transparency of an HTML Element with the RGBA CSS3 Property (Page 1 of 4 )
Among the variety of useful features that have been incorporated into the upcoming CSS3 specification, the “rgba” property has gained a well-deserved popularity with web designers. It allows you to manipulate the level of opacity of different sections of an HTML element, such as its background, text and borders, in all sorts of clever ways.
As its name clearly suggests, the property can be used for assigning a color to the RGB channels of a given CSS selector (always expressed in decimal notation), while at the same time specifying the level of transparency for its alpha channel. This ability to control the color and opacity of HTML elements makes the “rgba” property a hard-to-beat contender when it comes to defining and enhancing the visual presentation of the different sections that compose an (X)HTML document.
What’s more, to demonstrate how functional the property actually is, in previous chapters of the series I showed how to use it for individually altering the opacity of the inner text, background and borders of all of the H2 headers included in a sample web page. The process was not very different from working with the old “color” property that you’ve probably used hundreds of times before.
At this point, however, it’s possible that you’re wondering if the property can be utilized for manipulating the overall transparency of an HTML element, right? Well, the answer is a resounding yes! And in this penultimate episode of the series I’m going to show how to perform this task, as usual with some approachable hands-on examples.
Now, it’s time to discover how to utilize the “rgba” CSS3 property in a few different and creative ways. Let’s get going!