As we know RGB means combination of red, green and blue. This combination is weel known to us but it produces color flat, simple and bit boring also. But the new elemant in RGBA 'A' indicates alpha which is opacity in color or you can say transparency. Means now we can add amount of transparency of color and allow how much background color should appear. So adding lot more via CSS3 to your website color and graphics experience, this can help a lot in order to give users a dynamic experience.
Now lots of reader think that we have oacity already which works well every time like this
h1 {color: rgb(0, 0, 0);background-color: rgb(255, 255, 255);opacity: 0.5;}
But now the best thing of RGBA which makes itself differ than opacity is that, you can set transparency to a single element while opacity gives transparency to every element. Now look this example having RGBA for background color only (not for text color as that of opacity do).
h1 {color: rgb(0, 0, 0); background-color: rgba(255, 255, 255, 0.5); }
As you see only transparency comes in background color but not in font color. Now alpha here is '0.5'. It can have value up to 1, where one is having no transparency and 0.1 has most. (as same as opacity concept). But we only show you background color opacity, just look little bit more about it in below picture.
h1 {color: rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
}
Here the special thing is transparency in font color, but background color is showing plane white having no opacity effect of 0.5 which can be explained as 50% transparent But the best part which actually makes web pages dynamic is coming now but simple as we see above. So have a fast look.
div {border: 10px solid rgba(255, 255, 255, 0.3);
background-color: rgb(255, 255, 255);
}
So this is transparency in Border color while opacity doesn't produce this effect greatly to use in website as compared to RGBA. The really great thing about RGBA colour is that it gives us the ability to create far more graphically rich designs without the need to use images. Not only does that make for faster and lighter pages, but sites which are easier and quicker to build and maintain. CSS values can also be changed in response to user interaction or even manipulated with JavaScript in a way that’s just not so easy using images. Now lets come to the last example , which is hovering example that is similar to opacity hovering but without using imges.
So hovering effect example as well as css are written above. That’s a brief insight into RGBA colour, what it’s good for and how it can be used whilst providing support for older browsers. With the current lack of support in Internet Explorer, it’s probably not a technique that commercial designs will want to heavily rely on right away – simply because of the overhead of needing to think about fallback all the time.
div { color: rgba(255, 255, 255, 0.8); background-color: rgba(142, 213, 87, 0.3); }
div:hover { color: rgba(255, 255, 255, 1); background-color: rgba(142, 213, 87, 0.6);}
So hovering effect example as well as css are written above. That’s a brief insight into RGBA colour, what it’s good for and how it can be used whilst providing support for older browsers. With the current lack of support in Internet Explorer, it’s probably not a technique that commercial designs will want to heavily rely on right away – simply because of the overhead of needing to think about fallback all the time.
