Below are some quick 'tips' I'll write about (and others can post below) for some little tricks I have found out with CSS.

Opacity issues:
- If you're trying to set a half-opaque, black border (like Facebook), try this:
HTML Code:

Code: Select all

<div style="border:10px solid rgba(0,0,0,0.5);border-radius:10px;  padding:20px;width:400px;font-family:Arial;background:#fff;">Test div</div>
<!--Creates a Facebook popup-like div-->

*Note: The border-radius MUST be the same as the border-width (the first '10px', otherwise you'll get weird overlap issues.

- If you are trying to make a div half-opaque using opacity:0.5;, you'll find that the text inside it also changes it's opacity. How do we stop that?
HTML Code:

Code: Select all

<div style="background:rgba(0,0,0,0.5);color:#fff;">Fully opaque text!</div>

As you can see, rgba is very useful in these situations. Check out this page for a chart showing compatibility.



This is a new thread, so please add some more things you have learned below!

Nice of you to post such messages.

However, the first code does not work, either in IE9 nor FF4. The second is doing in FF4, but only the first hues of gray, not opacity. Just paste both codes in a file, give the body a yellow background, and see the difference.