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!

Look the sample of code below:

[css]::-moz-selection{
background-color: #ff0000;
color: #fff;
}[/css]

now when user selected or highlighted any text, the background color will change to red (#ff0000) and the text color is white (#fff). I used that style on this site so simply highlighted any text here and see the result.

Do not forget that this is Mozilla’s specific CSS, so it won’t work on Internet Explorer. I hope this property will be included on CSS3 specification draft so more browser will support it.