CKnol.Com

Let us play with Mozilla’s CSS again. Now we will try to make a cool transparent element with -moz-opacity property. This property is also available in CSS3 specification with the name opacity. Using this property, you can control how solid your element is. The value is ranged from 0 (full-transparent) to 1 (solid). So, 0.5 value means the element is 50% transparent.

Watch the sample below:

Transparent Element

All of the 4 boxes actually have the same color, red. What make each looks different is the -moz-opacity setting. Box number 1 has 25% opacity (0.25), box number 2 has 50% opacity (0.5), box number 3 has 75% opacity (0.75), and the last box number 4 has 100% opacity (1).

Here is the code:

[css].bigBox {
background-color: black;
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 0 5px 10px 0;
padding: 0;
float: left;
display: block;
}

.box1, .box2, .box3, .box4 {
background-color: red;
width: 50px;
height: 50px;
border: 0;
margin: 0;
padding: 0;
float: left;
text-align: center;
color: white;
}

.box1 {
-moz-opacity: 0.25;
opacity: 0.25;
}

.box2 {
-moz-opacity: 0.5;
opacity: 0.5;
}

.box3 {
-moz-opacity: 0.75;
opacity: 0.75;
}

.box4 {
-moz-opacity: 1;
opacity: 1;
}[/css]

[html]
1
2
3
4
[/html]

Try to combine this with element who has background image and you will surely get a nice effect. Hover will look good too. I already implement this in my comment list element. If you want to see it, just find any post in my blog that has lot of comments, and check out the comment box.

Don’t forget. This is Mozilla/Firefox spesific CSS. Sorry to IE users, get FireFox please.

Good luck!

Popularity: 42% [?]