Lets examine the history of transparencies as it relates to web design. Since the beginning of (internet) time, we have had the GIF image format. With this format, you could make parts of your image transparent, thus allowing background elements to show through those transparent regions letting web designers achieve basic layered effects. The problem with GIFs is that any non-transparent pixel blocks out anything displayed behind it so it’s the all or nothing approach here.
The blue PNG image is made with 50% transparency. We can see the yellow image behind it.
Next, thankfully, came the PNG image format. Not only does it support transparent backgrounds like GIFs but it also has an alpha channel. Using the alpha channel, we can make the whole image semi-transparent allowing elements behind the image to show throw. I’ve demonstrated what this would look like with the image to the right. You can see the yellow image “peeking” through. While using this method we can create more advanced layering affects it’s still only an image-based solution. What about having actually HTML elements be transparent? Is there any way to do that?
Opacity with CSS3 to the Rescue
With CSS3 I’m happy to say, YES! Using the “opacity” CSS property we can create layers and, using some simple JavaScript, even create fading effects. The opacity property takes a floating-point number between 0 and 1 with 0 being 100% transparent and 1 being 100% opaque. Lets take a look at some sample CSS:
opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
}
.usingrgba {
background-color: rgba(0,0,255,0.5);
}
In the first example, the opacity property is the standard set forth by CSS3 but we’re using two other browser specific properties. The “-moz” is for older versions of firefox and the “alpha” filter is an Internet Explorer hack. In second style rule we use “rgba”, which is a different way of defining colors in CSS. Instead of the old-fashion hex values for colors, we can specify numbers between 0 and 255 for the red, green and blue channels as well as a number between 0 and 1 for the alpha filter. The difference between the two is the second example would only make the background of the element semi-transparent where the opacity property applies to both the foreground and background of an element. Take a look at the elements below to see the difference in styles.
Creating a Fade Animation
Now we get to the fun part. Using some simple JavaScript we can create a fade animation to apply to any of our elements! Take a look at the script below (Note: for simplicity, the functions below are going to work only on browsers that support the opacity property and not older browsers. If you want it to work on more browsers, this article can help you out).
var op, timer;
op = 0;
timer = window.setInterval(
function() {
element.style.opacity = (op/100);
op += 10;
if(op >= 100) {
window.clearInterval(timer);
}
), 200);
}
function fadeOut(element) {
var op, timer;
op = 100;
timer = window.setInterval(
function() {
element.style.opacity = (op/100);
op -= 10;
if(op <= 0) {
window.clearInterval(timer);
}
), 200);
}
So here we have two functions, one to fade in an element and another to fade out the element. An anonymous function is passed to the window.setInterval function and will be called every 200 milliseconds. This anonymous function will fade our element and then when it’s reached its limit, will tell the window object to stop calling the function. One thing you’ll note is the use of whole numbers and then a division step to set the opacity. The reason for doing that instead of using fractions from the start is during my testing I found that JavaScript seems to have some quirky behavior when it comes to incrementing or decrementing on fractions. Try out the demo page for more examples.
The new abilities with CSS3 are really starting to pile up. Combining fading effects with 2D transforms, think of the limitless possibilities web developers have to implement their designs. Photoshopping your way to a beautiful site will be a thing of the past!