How to make a div with glassy and semi transparent effect?
Question by selvin
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 by Starx
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 *
}
