One of the latest additions to CSS design is a favorite of mine. And now you have something new to learn.

First you had your hex # — you had to learn stuff like #000000 = black.

Then you had your RGB #, utilizing sites like cloford.com to find which one you like.  Again the only one I stuck to memory was black and white – 0,0,0 = back, 255, 255, 255 = white.

But, now we can take that fabulous RGB number and add an opacity to it! I know right? In steps RBGA – Red Blue Green Alpha. For a bit of useless knowledge, those three numbers all signify the property, the amount of red is first, the blue second, the green third and now you have a fourth number, the alpha state. The Alpha State is a matter of percentage – 0 state being full transparent, 1 state being full visibility. To set somewhere in between you would use a decimal. .5 being at 50% opacity.

To see an example of a “real” RBGA state – check out my Featured Box, underneath my header. There is a white div set with a .6 opacity state. I didn’t want to have a big white box behind my text, but I also know that the blood splatter would make the text hard to read. So I added a white alpha background.

rgba property

This is a great thing to do if you have a patterned background and you want to add text in your div. Here is an example of a div with a padding of 10px and a 60% opacity.

<div style=”background-color: rgba(255,255,255,.6); padding: 10px;”> Your Text Here! </div>

For more information on RGBA check out CSS3

Rachel Rivera