DIV Opacity Gradient

[seanhalley]

Hi all,

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:

http://disarmer.freeservers.com/test...t/no_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);
Result: http://disarmer.freeservers.com/test...ient/attempt1/
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.
Result: http://disarmer.freeservers.com/test...ient/attempt2/
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
Description: I found a Javascript solution for softening the edges of an image:
http://cssglobe.com/post/1344/soft-e...-gradients-for
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.
Result: http://disarmer.freeservers.com/test...ient/attempt3/
Issues: a) It's quite slow to use; b) Alignment issues again, probably caused by the HTML markup inside the Javascript code so I guess with some editing that could be fixed.

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.

Thanks
Sean

[seanhalley]

Not even a single response? Come on guys!

I've even thought of a 4th option: Create about a hundred DIVs as rows each with 1px height, and having a descending opacity across them. But I can think of the issues with that already: inelegant, high maintenance costs and also probably the blocking of the underneath DIV.

If anyone can help shed some light on this very, very dark issue I'd be most grateful.

Thanks
Sean

[Apostropartheid]

To be honest, you have looked at all the options I could think up and they're not going to happen. I think you should just have this opacity gradient over the area with the cloud already there, as this blocks user interaction anyway.

[seanhalley]

Hi Cyanlight,

Thanks for responding, you mean just flatten the whole page, and "unstick" the footer, so it appends to the end of the main content? That would be consolation I guess.

I see what you mean about the cloud already blocking content, but the aim was to reduce the opacity to such a level that to the user, the content would prety much disappear before it reached the cloud.

But thanks for your help, it's better to have an official "BIG FAT NO" stamp rather than no response!

Sean

[Apostropartheid]

What I meant was put the opacity gradient underneath the cloud. Though it's not exactly what you wanted, it might prove an adequate alternative.