This tutorial is best viewed in Webkit, or Mozilla based browsers (i.e. ANYTHING other than Internet Explorer).
Opacity settings have existed in CSS since Internet Explorer 4 when Microsoft debuted their proprietary filters. Mozilla and Webkit based browsers started providing limited support for opacity filters by 2004. Now in the age of CSS 3, and HTML 5 there are multiple ways to play with opacity when creating your design.
Opacity is the oldest and the most versatile of the 3 techniques we’ll be reviewing today, it is also the quirkiest. Opacity can change the alpha transparency of any CSS element. However, it also changes the opacity of all children within that element.
Let’s say we want to create a translucent box over a background using opacity:
<div style="background-image: url('dotbg119.gif'); padding: 30px;"> <div style="opacity: 0.6; background-color: #000000; padding: 10px;"> <div style="color: #ffffff;">Sample text.</div> </div> </div>
Copy of the box text: This is a sample of text in the box. Notice that not only is the background of this div transparent, but the text is also. Making it difficult to read.
This is why opacity is not very practical to use in most aspects of a layout. Often in the design only one element is desired to have opacity defined, and the rest are desired to be opaque.
However, this can be a desirable effect to add to images, especially as a special action on hover. here is an example.
RGBa is a CSS3 color declaration. It is currently supported by virtually all browsers other than Internet Explorer. RGBa defines the values for Red, Green, Blue, and Alpha opacity. RGBa can be used wherever a color can be defined. It can be applied to backgrounds, text, borders, etc. The opacity value will ONLY apply to that color. So let’s see the example above using RGBa:
<div style="background-image: url('dotbg119.gif'); padding: 30px;"> <div style="background-color: rgba(0,0,0,0.6); padding: 10px; color: #ffffff;">Sample text</div> </div>
Much better, right?
However, for full cross browser support RGBa is tricky to implement. If trying to set a translucent layout background it might not be the best way to go(though this also has issues), for adding a bit of flair to a layout rgba is fine, as in a browser that does not support the element it will translate to rgb.
This is where PNG 24 comes in. PNG 24 has full support of image transparency, not only allowing transparent backgrounds like in GIF and PNG 8, but for the image itself to maintain it’s alpha opacity. eHow has a nice tutorial on creating PNG 24 files in Photoshop.
PNG 24 is an incredibly useful format when creating layouts that revolve around translucent elements. In the example above rgba could be replaced with a 1×1 PNG with an opacity set to 60% in Photoshop:
<div style="background-image: url('dotbg119.gif'); padding: 30px;"> <div style="background-image:url('transparentbg1.png'); padding: 10px; color: #ffffff;">This is a sample of text in the box. Notice that only the background of this div is transparent. The text remains opaque making it easier to read.</div> </div>
PNG 24 can also be used to add shading to other elements.
Combining these concepts on opacity can create some amazing and creative results in your webpage design.
While both Webkit and Mozilla browsers are now adherent to CSS3, Internet Explorer is not. Below are some tutorials on creating these effects so that they work in all browsers, or at least degrade gracefully:
- RGBa – IE Fallback
- CSS3 Solutions for Internet Explorer
- PNG 24 Alpha Transparency Fix for IE
- PNG Files Do Not Show Transparent