Its simple enough:
.transp5 { opacity: 0.5; }
For browsers without CSS3 support:
.transp5 { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
I setup a couple of classes with trans + "the level of opacity".
Also, I recently wanted to set a background color to be transparent, but not the text within it. This is also possible in browsers that support rgba (red, green, blue, alpha) color specifiers:
.transp5bg { background-color: rgba(0,0,0,0.50); }
Creating gradients with transparency are usually relegated to PNG graphics files, as they support 24-bit alpha channels. With CSS3, this is becoming possible. Its not all that difficult either!
Here's a simple CSS3 class which employs a gradient from gray to black, with support for recent versions of MSIE, Webkit (Safari, Chrome, etc.), and Mozilla (Firefox, Iceweasel, etc.):
.g2b { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#000000'); background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#000)); background: -moz-linear-gradient(top, #555, #000); }
For transparency, I'm using rgba, which in my experience is not supported by MSIE 7 or 8.
.transpgdbd { background: transparent; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.5, #000), to(#000)); background: -moz-linear-gradient(top, rgba(0,0,0,0), #000 400px); }
I've setup sketch99.com to with a CSS3 gradient so visitors can witness the action for themselves.
Speaking of MSIE versus the-rest-of-the-world, this [page](http:// blog.niccai.com/post/51688182/maintainable-css-using-ie-specific-css-selectors) suggests and interesting way of creating an HTML body class specific to different versions of MSIE. I wouldn't use it, as its pretty bulky, and as the author admits, it doesn't validate.
If I were to do something like this, I would use the conditional operators to set a javascript variable in the head, and then use javascript or jquery to add the class once the opening body tag gets loaded. Granted, I don't know if that would even work, but its where I would start.
When it comes to browser detection, I'm OK with the comment based IE conditionals, but I don't like them. I don't enjoy supporting a company that doesn't support open source software! More to the point, I'm OK with them because even if a browser spoofs their user agent, only real MSIE browsers will process them.
This is similar to how jQuery suggests testing for user agents - check to see if it supports certain functionality that needs to get used. If I want to check if a browser is IE, I will usually use:
if($.support.opacity) { // not IE, or at least not a modern browser }