Home arrow Style Sheets arrow Controlling Overall Transparency of an HTML Element with the RGBA CSS3 Property

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
May 10, 2010
  1. · Controlling Overall Transparency of an HTML Element with the RGBA CSS3 Property
  2. · Review: modifying the transparency of the borders of an HTML element via the rgba property
  3. · Changing the overall opacity of an HTML element
  4. · Adding the previous CSS styles to a web page

print this article

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.

Hidden behind a compact and remarkably simple syntax, the “rgba” property is a powerful feature that permits you to create outstanding visual effects on web pages without having to work with transparent PNG graphics or even appeal to the functionality of JavaScript, which is always an uncontrolled and unsafe territory.

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!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials