Grow your CSS skills. Land your dream job.

Fade out bottom, with grey instead of white

  • # July 16, 2009 at 4:51 am

    Hi,

    I found Chris’ http://css-tricks.com/examples/FadeOutBottom/, and thought it was an awesome idea. However, I would like to implement it with a grey (#303030) fade out instead of the white one.

    Here’s my result: http://files.getdropbox.com/u/12637/Fad … index.html
    As the sharp-eyed can see, the supposed-to-be transparent part of the PNG is visible. My question is simple — how can I (can I?) make the whole PNG completely invisible, to achieve a perfect fade out?

    Thanks in advance!

    # July 16, 2009 at 3:48 pm

    It’s simple, just change the colour of your text, if you just add color:#fff; to your CSS for the body the fade out works, the reason it doesn’t work now is because the colour of the text is darker.

    # July 17, 2009 at 9:38 am

    I’m afraid you misunderstood. It is the PNG itself that is slightly visible, zoom in and you will be able to see the contours of the PNG even where it is supposed to be completely transparent.

    Is there a way to build the PNG so that it is not visible?

    # July 17, 2009 at 7:35 pm

    This probably isn’t very helpful, but I THINK the way fading works in PNG’s is that photoshop/whatever reduces the opacity of an image block in strips, from lowest opacity to highest opacity. Therefore, I assume, at sufficient zoom you will be able to make out the transitions from one strip to the next. I’ve had a look at your example, however, and I have to say it looks fine…

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".