Jul
04
2012

Playing With Opacity

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.

CSS Opacity

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>
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.

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.

There is a great javascript that does a fade in and out of images, it can create a nice morphing effect if a background image is placed under the fading image.

Here is an example of that script. The original version of the javascript can be found at Dynamic Drive. However, at some point I must have updated the code for modern browsers, my version of the script can be downloaded HERE.

RGBa

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>
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.

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.

from mycutegraphics.com/

PNG 24

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>
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.

PNG 24 can also be used to add shading to other elements.

button

This is the PNG that creates the shading in the above example, note that the PNG is translucent, and has no color other than what was needed to add shading.

Combining these concepts on opacity can create some amazing and creative results in your webpage design.

Issues

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:

Further Reading

Polka Dot background, and transparent yellow flower clip art came from MyCuteGraphics.com.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

CommentLuv badge