As promised in my last post I will be discussing the new additions to CSS3 that will not only allow us to manipulate Opacity and Alpha.

The ability to natively specify the opacity of an element has been a long awaited feature. For a long time web developers have use workarounds, browser-specific code, hacks and most recently JavaScript library to set the opacity of an HTML element. The CSS syntax for is as follows: opacity: 0.4. Since Opacity is a measurement of light intensity its value is represented from 1.0, being its maximum to 0.0 being its minimum. Having explained Opacity, that brings us to Alpha, these two terms are often used interchangeably because they result in the same effects. In graphical output devices like computer monitor Alpha is the portion a pixel’s data reserved for transparency information.

The alpha, or its official designation ‘Alpha Channel’, acts as a mask specifying ‘how a pixel’s color should be merged with another when they are overlaid, on top of the other.’ In the CSS3 the main difference in usage between Opacity and Alpha is that as we saw earlier Opacity is applied to the entire element. Alpha on the other hand is used as an additional value when specifying the color of an HTML element. CSS syntax for is as follows: background: RGBA (255, 0, 0, 0.2); The RGB (Red, Green, Blue) constructor is extended to include alpha. Where the first three values specify the red, green and blue the last on, 0.2, set the alpha. The syntax is for alpha is the same Opacity, 1.0-0.0, because alpha is the RBG (digital) representation of Opacity as applied to 32-bit graphics.

The support of Opacity and Alpha Channels is very significant for the work designers and developer do. It allows for further precision for design and implementation, and that makes us happy campers. The next meet I will covering HSL or Hue-Saturation-Lightness in CSS3.