Dear reader,
After having installed the horrific Firefox 2.0 beta when it came out, I have been quite sceptical about installing Firefox beta versions ever again, but today decided to do so after a while of gathering courage. 🙂
Don’t get me wrong, I definitely consider Firefox my primary browser, but the experience I got from the 2.0 betas was terrible and after that I decided ‘firmly’ to stick with the main releases — that is, until now.
Now, after installing the 3.0b2 version I viewed the what’s new section, especially about what’s new with Firefox’s CSS support. To my delight I found out that it now supports the RGBA definition (Red-Green-Blue-Alpha) in elements, enabling to not just adjust their colors, but their “alpha value” or transparency as well.
I just had to test it, and to make it more interesting, I tried it with the other Windows browsers installed on my computer as well, namely:
The HTML code used to test this can be found below.
<html>
<head>
<title>Firefox 3.0 Beta 2 test: CSS, RGBA (alpha)</title>
<style type="text/css">
p {
font: bold 12px/14px helvetica,verdana,sans-serif;
color: rgba(064,030,044,0.4);
}
#leftrect {
position: absolute;
padding: 15px;
width: 200px;
height: 200px;
border: 1px solid rgb(255,25,25);
background-color: rgba(255,0,0,0.7);
}
#middlerect {
position: absolute;
margin-left: 75px;
margin-top: 75px;
padding: 15px;
width: 200px;
height: 200px;
border: 1px solid rgb(25,25,255);
background-color: rgba(0,0,255,0.7);
}
#rightrect {
position: absolute;
margin-left: 150px;
margin-top: 150px;
padding: 15px;
width: 200px;
height: 200px;
border: 1px solid rgb(25,255,25);
background-color: rgba(0,255,0,0.7);
}
</style>
</head>
<body>
<div id="leftrect">
<p>
Some text on a red bgr.
</p>
</div>
<div id="middlerect">
<p>
Another text, but on a blue bgr.
</p>
</div>
<div id="rightrect">
<p>
Third text, this time on a green bgr.
</p>
</div>
</body>
</html>
Guess which browsers managed to render it properly? The answer can be found in the picture below (click to enlarge).
Filed under: Web Browsers | Tagged: alpha, Browsers, CSS, Firefox, Internet Explorer, Opera, RGBA, Safari, Web |
Webgrizzly's Blog 
really help me:) thanks for described it.