Cross Browser CSS Opacity

  • user warning: Table 'allaboutwebstuff.comments' doesn't exist query: SELECT COUNT(*) FROM comments c WHERE c.nid = 50 AND c.status = 0 in /home/albertoperego/allaboutwebstuff.com/modules/comment/comment.module on line 992.
  • user warning: Table 'allaboutwebstuff.comments' doesn't exist query: SELECT c.cid as cid, c.pid, c.nid, c.subject, c.comment, c.format, c.timestamp, c.name, c.mail, c.homepage, u.uid, u.name AS registered_name, u.signature, u.picture, u.data, c.thread, c.status FROM comments c INNER JOIN users u ON c.uid = u.uid WHERE c.nid = 50 AND c.status = 0 ORDER BY c.thread DESC LIMIT 0, 50 in /home/albertoperego/allaboutwebstuff.com/modules/comment/comment.module on line 992.

I've found that transparency is very often necessary in modern web interfaces. That's because it help the user to understand what's available and what's not and also helps a lot when webpages are rich of non-standard interfaces.
Floating HTML frames and windows, drag & drop elements and photo slideshows do REQUIRE the use of opacity and transparency.

There are basically 2 ways to obtain this, the first is to use a small square image and replicate it in the background:

background: transparent url(images/bg.png) repeat 0 0;

A tipical image used for this scope is 2x2 pixels and has been saved as a PNG or GIF. This is because other formats don't contain the transparency (alpha) information in them.

Another solution consists on building a CSS class containing all of the following proprerties (cross-browser compatible) and attach it to the element we need to fade out:

.translucent{
  -khtml-opacity:.60;
  -ms-filter:”alpha(opacity=60)”;
  -moz-opacity:.60;
  filter:alpha(opacity=60);
  opacity:.60;
}

The first technique presented let you set a gradient faded background while the CSS can't. The advantage of using the CSS solution is that it works better on different browsers AND let you set the opacity of images too, very handy for declare the inactive states of buttons and pictures.

Tags:
Share and Enjoy: