How To, Get great looking Transparencies with RGBa
Friday, 22. January 2010
CSS 3.0 has a great new features called RGBa.
You can now make a transparent background, transparent text, or just about anything else transparent with RGBa.
.myClass {
background-color:rgba(255,255,255,0.5)
}
background-color:rgba(255,255,255,0.5)
}
The above tag will color your area witha white background that is 50% transparent. The only issue with RGBa at this time is that IE doesnt support it. The only CSS 3.0 compliant browsers seem to be Firefox and Safri. However, I have tested this in Opera and it does work.
You can also change the color of text element with:
.myClass {
color:rgba(255,255,255,0.5)
}
color:rgba(255,255,255,0.5)
}
The old style of transparency is still supported by all browsers
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
The major difference between these two styles is that the new method RGBa will only effect the targeted ellement. Where as with opacity all subclasses are also affected.
