How to make a div with glassy and semi transparent effect?

Question

I want to give a div a glassy reflection appearance as well as a semi transparent effect. How can I combine these two effects so that the div will look like a glassy transparent gadget? Is there a way to do this?

The div's bgcolor is lightskyblue and no background image is set yet.

Answer 1

You can give alpha tranparency in your background color.

For example

div { 
    background: rgba(255,255,255,0.5); /* white color with 50% transparency */
}

In IE However, rgba does not works. You need to use filter.

For Example

div {
    background: transparent;
    -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr=#77ffffff, endColorstr=#77ffffff)"; /* For IE8 */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#77ffffff, endColorstr=#77ffffff); /* < IE 7 */
    zoom: 1;
}

The color patter in both the start and end color is different than the way in RGBA, it user ARGB Format and all in Hex. Like in above example, following are how the values are distributed

77: alpha (fully transparent: 00, fully opaque: FF) 
ff: Red
ff: Green
ff: Blue

This method will place a transparent background on your division, but if you want the entire div to be tranparent including everything inside, then you can use opacity property

For example

div {
    background: #fff;
    opacity: 0.5; /* This is not support in IE though, use filter if needed in IE *
}

Demo

Answer 2

Use the Gradient CSS properties to create a glossy effect.

For Firefox use

background: -moz-linear-gradient(90deg, red, white, blue);

or

background: -moz-linear-gradient(top,#000,#444 45%, #777 45%, #555);

you can add as many colors as you want to get the right look. https://developer.mozilla.org/en/CSS/-moz-linear-gradient

For IE use the filter property

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 

Check working example at http://jsfiddle.net/gkyg3/1/

For Transparency You need to use the RGBA background property on the container div. background: rgba(64, 64, 64, 0.5). 64, 64, 64 are the RGB color values. and 0.5 is the opacity value. Now parent can have it's own opacity value that will not be inherited by it's children. This is fully supported by FireFox, Opera, Chrome, Safari and IE9.

Check working example at http://jsfiddle.net/Rp5BN/

To support IE 5.5 to 8 we need to use vendor-specific CSS 'gradient filter:' So you need to add this.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

Where 7f represents 127, i.e. 50% opacity and 404040 is the color.

Check working example in IE http://jsfiddle.net/Rp5BN/2/