Geek Answers Handbook

How to make div with glass and translucent effect?

I want to give the div a glass reflection as well as a translucent effect. How can I combine these two effects so that the div looks like a transparent transparent gadget? Is there any way to do this?

Div bgcolor is lightkyblue and the background image has not yet been set.

enter image description here

+5
source share
5 answers

You can give alpha transparency in the background color.

for instance

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

In IE, however, it rgbadoes not work. You need to use a filter.

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

, rgba, ARGB . , ,

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

, , div , , opacity

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

+7

CSS Gradient .

Firefox

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


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

, , . https://developer.mozilla.org/en/CSS/-moz-linear-gradient

IE filter

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

http://jsfiddle.net/gkyg3/1/

RGBA div. background: rgba(64, 64, 64, 0.5). 64, 64, 64 - RGB. 0,5 - . , . FireFox, Opera, Chrome, Safari IE9.

http://jsfiddle.net/Rp5BN/

IE 5.5 8 CSS : ", .

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

7f 127, 50% 404040 - .

IE http://jsfiddle.net/Rp5BN/2/

+4

, ,

background: rgba(256,256,256,0.5);

& IE

{background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; /* IE8 */    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF);   /* IE6 & 7 */      zoom: 1;}

IE hsla: http://greenevillage.net/csspages/hsla.aspx

Edit

, http://jsfiddle.net/sandeep/hfTdw/5/

+2

"" , , - . "" ( ?), , , - CSS (+ , - ).

"" ​​ , , / .

+1

CSS3, . DIV, . . z-index div .

.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Glass Effect</title>
    <style type="text/css">
    body{
    background-color:#AA3333;
    }
    div#content{
    position:absolute;
    z-index:99;
    top:100px;
    left:100px;
    width:400px;
    height:300px;

    }
    div#glass{
    position:absolute;
    z-index:100;
    top:100px;
    left:100px;
    background-color:#777777;
    opacity:0.20; 
    filter:alpha(opacity=20);
    width:400px;
    height:300px;
    }
    </style>
</head>
<body>
    <div id="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum</p>
    </div>
    <div id="glass">
    </div>
</body>
</html>
+1

More articles:


All Articles