So far, my first week at work has been… Interesting. Very tiring, but interesting. I’ve realized I retain new information (example: products and phone line directory) slower than I did when I was younger. *sigh* I’m getting old.

Anyway, I’ve received e-mails/comments about how I made each “block” of text have a semi-transparent background. There are 2 ways to do it:

First method: Using the IE6 “fix” opacity filter, which is a combination of CSS and JavaScript. (source) This works well with FireFox, although there are a number of browsers (I forget which ones and what versions) ignore the opacity rule. Thus, reverts to the default opacity of 100%. So, your visitors who may be still be using ancient browsers won’t experience the “full effect” of your site. I think this method is out-dated, and from what I’ve been reading/hearing is that this will be deprecated (no longer supported) in the upcoming CSS 3.0.

I, personally, don’t encourage using or continue to use this method, but if it works for some of you — more power to you!

Second method: Being an avid follower of A List Apart, I’ve learned and applied this method to past (and current) layouts and clients’ websites: Cross-Browser Variable Opacity with PNG (source). This is a combination of CSS and Javascript, but keep in mind this can without JavaScript. So, this is emphasized mostly on CSS.

Example: My stylesheet - [link removed]
(Go ahead and look, I don’t care. From what’s already been logged in my statistics, a lot of you have already done so!)

Bonus: You will also see how I changed the font colors as you hover each “block”. You’re welcome =)

I find this more effective compared to the other method. Because newer versions of favored browsers (and browsers that are currently in development) support alpha transparency in PNG (or “ping”) image files. What’s also great about this method is that it is supported by Opera browser for Linux, WebTV, and hand-held video game consoles! Cool, huh?

Another tip about using PNG backgrounds: The use of “multi-layered” background images. I will be blogging about this in a later post because I’m still in the process of collecting more information, and putting together a small demonstration.

Web designers and aspiring ones: Keep in mind that as languages evolve, so will browsers. So, it’s always good to stay up-to-date.

My brain just farted and it’s midnight. I have a test in 8 hours and should be asleep. My apologies if this post isn’t very informative, but I did include some sources!

Anyway, good night! =)

This entry was posted on Wednesday, November 7th, 2007 at 11:06pm and is filed under Personal. This post is also tagged with css, javascript, opacity and 3 views. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.