Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2009
    Location
    London, UK
    Posts
    58
    Thanks
    8
    Thanked 0 Times in 0 Posts

    DIV Opacity Gradient

    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

  • #2
    New Coder
    Join Date
    Jul 2009
    Location
    London, UK
    Posts
    58
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.

  • #4
    New Coder
    Join Date
    Jul 2009
    Location
    London, UK
    Posts
    58
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •