Correct transparency

Once I needed to make transparent side margins for one design. I decided to use CSS transparency.

But what was it like to find out that all the elements inside the transparent block also become transparent and this cannot be changed :-(, then I had to use transparent png.
')
Recently, I came across a wonderful technique that allows you to eliminate this problem. I want to kindly share it with you.


The technique is the substrate of the transparent block in the main unit, which you want to make transparent.

This is how our block looks like:

< div id = "container" >

< h1 > Hi, I'm a transparent block </ h1 >

Text inside the block. Text inside the block. Text inside the block.

</ div >

Now add a transparent substrate:

< div id = "container" >

< div class = "transparency" >
<! - This is a transparent block ->
</ div >

< div class = "content" >
< h1 > Hi, I'm a transparent block </ h1 >
Text inside the block. Text inside the block. Text inside the block.
</ div >
</ div >

We now turn to the design of css:

#container {
padding: 20px;
width: 300px;
color: #FFFFFF;
position: relative;
float: left;
margin-left: 20px;
overflow: hidden;
}

#container .transparency {
opacity: 0.5;
filter: alpha (opacity = 50);
-moz-opacity: 0.5;
background-color: # 000000;
width: 340px;
height: 1500px;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}

.content {
position: relative;
}

Done! Now all elements inside the block will not change their transparency. For complete happiness, I decided to write a small jQuery script that automates everything.

You only need to add the transp class to your block:

< div id = "container" class = "transp" >

< h1 > Hi, I'm a transparent block </ h1 >

Text inside the block. Text inside the block. Text inside the block.

</ div >

And of course, the jQuery code itself:

$ ( document ) .ready ( function () {
$ ( ".transp" ) .wrapInner ( '<div>' ) .children (). addClass ( "content" );
$ ( ".transp .content" ) .before ( '<div>' ) .prev (). addClass ( "transparency" );
});

I certainly do not pretend to the jQuery master, but it works!

View demo
Download demo

Subscribe to Chernev's notes