Transparent background and opaque text

written on March 4, 2010 in Tutorials, WWW

On a totally off-topic-to-the-title note:

1. My new theme is done and up (I like to state the obvious), and many thanks to Lani who let me use her adorable Pokemon artwork in my designs!
2. UMD kicked Duke’s ass in basketball tonight, 79-72! Sorry Duke fans, but Terps > Blue Devils. ALWAYS.
3. It’s almost Friday!

These things made my otherwise miserably long and omg-I-want-to-kill-myself week somewhat more tolerable. Again, let me know if you find bugs or errors of any sort with this theme. I wouldn’t be surprised if you did, since it was design + coded on a semi-functional brain that was in desperate need of sleep. Anyways, back on topic.

I haven’t done any tutorials/tips in a while, and as I was designing this new theme, I learned something I want to share with you all. With the arrival of CSS3, there are now so many things you can do with your designs without having to rely on images. One of these things is the opacity function. You can apply this property to pretty much any CSS selector: image, div, h2, etc. by using:
div { opacity: 0.5; }
This would give you a div with an opacity of 50%.

One problem with using opacity is that everything nested in the div becomes transparent. Text, images, whatnots will all inherit an opacity of whatever %. To counter this problem, you’ll need to change the background property instead, and scrap opacity all together. So instead of:
div { opacity: 0.5; }
You should use:
div { background: rgba(255, 255, 255, 0.5); }
This will give you a div with a white¹ background at 50% opacity.

But since IE² is dysfunctional when it comes to a lot of things, your background won’t show up at all if you just use the above CSS. So as a safety net, pick a color that is similar to the transparency result, and you get:
div { background: rgb(242, 241, 230); background: rgba(255, 255, 255, 0.5); }³
The order is important: rgb MUST come before rgbaEither that, or my browser testings were giving me funky results. Of course, there is always the traditional transparent png background method, which I won’t go into details about. You can easily find a tutorial on that through Google. Hope this helps! Now back to studying…Error processing request