CSS Transparent(Cross browser)

Post at Mon, 21.July.2008 10:50:30 PM .
Hit: 1590 . Comment: 1
 
I wanna share something about CSS. I will tell u how to make element become transparent and cross browser. Just use these code below :
     opacity:0.6;
     filter:alpha(opacity=60);




filter:alpha(opacity=60);
This code is used for IE. The opacity number, is start from 0 to 100.


opacity:0.6;
This code is used for all browser except IE. The opacity number, is start from 0 to 1.

Just use two code about, this will work to all browser ( I have test to Firefox 3, IE6, IE7, and Opera ).
Below the sample :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
 .box{
    opacity:0.6;
    filter:alpha(opacity=60);
    background-color:#0066FF;
    position:absolute;
    left:100px;
    top:10px;
    width:100px;
    height:100px;
 }
</style>
</head>

<body>
<div class="box">
    Tes
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas imperdiet scelerisque arcu. Integer imperdiet, tellus a lobortis posuere, risus odio viverra dolor, nec viverra magna ante eu ante. Nullam volutpat. Phasellus aliquam felis id erat. Mauris volutpat enim id mauris. Vestibulum in risus. Sed non neque. Curabitur at dolor. Suspendisse libero. Aliquam erat volutpat. Vivamus lectus metus, dignissim non, mattis id, imperdiet sed, sem. Suspendisse potenti. Nullam quis eros. Donec congue metus vitae urna.
</body>
</html>

And the result will be like this :

Tes
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas imperdiet scelerisque arcu. Integer imperdiet, tellus a lobortis posuere, risus odio viverra dolor, nec viverra magna ante eu ante. Nullam volutpat. Phasellus aliquam felis id erat. Mauris volutpat enim id mauris. Vestibulum in risus. Sed non neque. Curabitur at dolor. Suspendisse libero. Aliquam erat volutpat. Vivamus lectus metus, dignissim non, mattis id, imperdiet sed, sem. Suspendisse potenti. Nullam quis eros. Donec congue metus vitae urna.
 

 

Comments for "CSS Transparent(Cross browser)"

Oka Dayendra
22.July.2008 08:57:48 AM
Thx ya Darwin.. script transparantnya cm dikit kan :)

Leave a comment (Click Here)

Name*
E-mail* (not published)
URL
Comment*
Enter validation code