I've been trying to get an opacity gradient to work in both IE and Firefox. Here is a version of the site without the opacity gradient:
What I want to do is make the main area with the text gradually "fade away" as it gets closer to the cloud image (footer). I've tried a bunch of different ways but still don't have a cross browser solution. Below I give a summary of my failed attempts:
Option 1: Linear Gradient Alpha Filter
Description: I placed a second DIV over the main DIV and gave this second DIV the following property:
filter: Alpha(opacity=100, finishopacity=0, style=1, startx=0, starty=80, finishx=0, finishy=50);
Issues: a) Not supported by Firefox; b) cannot get the DIVs to be centrally aligned and elegantly resizable as in the no_gradient example.
Option 2: PNG Alpha Transparency
Description: I placed a second DIV over the main DIV and gave this second DIV the same background image as the main page, except I used a PNG image with a blended alpha opacity.
Issues: a) The foremost DIV blocks cursor interaction with the content DIV, so the links in the main content cannot be clicked; b) cannot get the DIVs to be centrally aligned and elegantly resizable as in the no_gradient example; c) it's a bit slow to use.
Option 3: CSS Soft Edge Technique
and I edited the script to make it work on DIVs, and only on the bottom edge, effectively giving a gradual upward fade to my main DIV, so no second DIV was necessary.
So, there are my attempts folks. I hope that someone can help me find a cross browser solution for this. I've seen so many threads online but no perfect solution yet. At the very least I hpoe this thread will provide some help for others in my situation.