Dreamweaver and CSS3 tip: Using RGBA Background Color for Better Results

Dreamweaver and CSS3 tip: Using RGBA Background Color for Better Results

Opacity. Here is a word that is probably most associated with the world of Photoshop and layers and such, but its transition over to HTML and CSS has not been that easy.

The main problem so far has been that an Opacity statement sets the opacity for the element we selected – that, we do want, and all it’s children, something we probably don’t want or need.

To solve this issue along comes CSS3 and introduces the background-color: rgba Statement, which is a great improvement on two fronts:
1. it uses “rgb” colors something designers and more familiar with then Hex colors.
2. It adds the “a” next to “rgb” to create “rgba”, the “a” of course is for Alpha or opacity. So now you can set up color and opacity in one short and simple statement.

Here is how the CSS for a background rgba statement looks:

1
2
3
.test {
background-color: rgba(255,0,0,1);
}

The number 1, furthest most to the right is the measure of the opacity and is equal to 100% opacity. Anything less then that is opaque.

If you need to pic specific rgb colors you can do this over in photo shop:

Screen shot 2011 09 11 at 9.28.31 PM 300x202 Dreamweaver and CSS3 tip: Using RGBA Background Color for Better Results

Hapyy rgba-ing!



Leave a Reply

Get Adobe Flash player