The “opacity” problem

The simple and short CSS “opacity:0.5″ property works just fine, at least on the most modern browsers, but affects not only the div`s background, but also the inner elements, making everything inside transparent. This can be solved by two ways.

The solution from the future

Using the CSS3 background property RBGA, the only problem its this will only works with CSS3 enabled browsers.

CSS
div{
background-color:rgba(255,255,255,0.5);
}

The solution for the past

Or by a workaround using a transparent empty element positioned behind the content, like this:

HTML

<div class="trans_box">
<p>My awesome content</p>
<div class="trans_back"></div>
</div>

CSS

.trans_box{
position:relative;
z-index:1;
}
.trans_back{
position:absolute;
z-index:-1
top:0;
left:0;
width:100%;
height:100%; // the height needs to be fixed in order to display correctly on ie6
background:black;
opacity:0.5;
}

The problem, again, its this just work on modern browsers, but we have a Javascript solution for the always loved IE family

CSS

.trans_back{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // ie8 hack
filter: alpha(opacity=50); // ie6-7 hack
}

The Jquery way

But hey, thats was an UGLY solution, so here it comes jQuery to saves the day. Using the same concept we can make a simple function that replace the ugliness of the hack, and will maintain the simplest html structure possible.

HTML
<div class="trans_box">
<p>My awesome content</p>
</div>

JS
$('.trans_box').append('<div class="trans_back"></div>');
$('.trans_box .trans_back').css({'opacity':0.50});

CSS
.trans_box{
position:relative;
z-index:1;
}
.trans_back{
background:black;
width:100%;
height:100%; // the height needs to be fixed in order to display correctly on ie6
position:absolute;
top:0;left:0;
z-index:-1;
display:block;
}

And thats all, i hope this little resume could save you some headaches.

$(".clean").each(function(){
var value = $(this).val();
$(this).focusin(function(){if($(this).val() == value){$(this).val("");};});
$(this).focusout(function(){if($(this).val() == ''){$(this).val(value);};});
});

Just add the class “.clean” to your input tag and voilá.