CSS Transparency Settings for All Browsers

Transparency is one of those CSS properties that has a weird history and requires lots of different properties and values to ensure cross browser compatibility that goes back as far as you can. To cover all your bases, you need a bunch of CSS statements. Fortunately they don’t interfere with each other, so using them all every time you wish to add transparency is no big hassle and worry-free. Here they are, and are currently set to 50% transparency:

.transparent {
	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	width: 100%; 

	/* Theoretically for IE 8 & 9 (more valid) */
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);

	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;

	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;

	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.5;
}

Update July 5, 2011. Here’s what I’d recommend for usage today, in way easier copy-and-pasteable format.

.transparent {
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
}

source: http://css-tricks.com

CSS Fix background-position Property

How to position a background-image as fix:

css:

body{
background-image:url('bg.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

CSS3 box-shadow

Add a box-shadow to a div element.
The box-shadow property is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.

css:

#div-shadow{
width:300px;
height:100px;
background-color:#ffffff;
box-shadow: 0px 0px 5px #888888;
}