CSS research

I'm completely knackered, but research is my life. One of my many clients wanted a semi transparent div. Now i say div, but they just want it to look shiny.

Basically then want an element with appox 20% opacity. Easy right, use a PNG. But that cancels out all ie versions apart from 7. How about a gif instead, you dont get alpha transparency! Well genius how about css, great, there are ways to do it on webkit, gecko, and ie, however they apply the same amount of transparency to their children.

the trick here is to think outside the box, literary...



Thanks to relative positioning, i made a solid div below my transparent div, and moved it over the transparent div, creating a the above effect. The cool things is that by modifing the z-index you can create a ghosting effect!

Best of all, there are no images used to create the above, (well apart form the obvious background pattern on the body), more testing is needed, but i think i might be on to something here.

The CSS
*{
text-align:center;
margin:0;
padding:0;
}
body{
background: url("pattern.gif");
}
div#wrapper{
margin:0 auto;
width:70%;
text-align:center;


padding:1em;
}
div#panel{
opacity: .50;
height:200px;
background: #ddd;
width:100%;
margin:0 auto;
}
div#wrapper p{
padding:1em;
background: #000;
color:#fff;
width:90%;
position:relative;
margin:0 auto;
top:-180px;
z-index:1;
}

The html

Transparent div

content goes here

Now if you excuse me, i'm off to bed