Docunext


CSS3 Transparency Opacity

June 15th, 2010

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);
}

Alpha Gradients - Yay!

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.

Multiple Transitions

Browser Detection

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
}
Yearly Indexes: 2003 2004 2006 2007 2008 2009 2010 2011 2012 2013 2015 2019 2020 2022