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.
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.
For more information on RGBA check out CSS3