How much could you possibly want to know about CSS opacity? Mandarin Design covers just about all of it here, including a look at how to achieve "Photoshoppy" image and text effects using just CSS.

Here’s the biggest thing to remember when working with opacity? You’ll need to use a couple different flavors of opacity to maintain cross-browser compliance:

• Firefox lets you use the real deal, opacity and the proper range of 0.0 to 1.0.
• IE makes you use filter:alpha(opacity=x), where x is a number from 0 to 100 (see-through to fully opaque).
• Older Mozilla browsers require -moz-opacity, which ranges fom 0.0 to 1.0, like standard opacity

My personal opacity favorites: using opacity on an image to create a CSS-based drop shadow, and using opacity on a large background element to create a transparent overlay on a page. Both give that Photoshop-quality look with pure CSS.

This entry was posted on Monday, September 18th, 2006 at 10:34 pm and is filed under css, learn. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.