I want to share with you some of the pain of UI development today. Before CSS3 setting an elements background opacity without affecting the content of that element’s opacity was a real pain. If you set the opacity of the element, then all the children of that element are effected. So what is the answer? Well, I little DOM manipulation to uncouple these elements will do the trick nicely. So here is a plugin that will do the job. I have also included transparency support for IE6 using the DD_BelatedPNG script (thank you Drew Diller! You are a legend!).
There is nothing to this script. Add the class to the elements you want to set a background opacity to and then set the amount. Add DD_belatedPNG.js if you have transparent png’s and want to support IE6, and set pngFix to true
I have set up a Github repo here and a demo page as well. I haven’t done much testing on this script yet as I no longer support IE6, but feedback is, as always, most welcome. Enjoy making groovey transparencies on the web all!
Trackbacks/Pingbacks