The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fade out bottom, with grey instead of white

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #25475


    I found Chris’, 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: … 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!


    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.


    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?


    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)
  • The forum ‘CSS’ is closed to new topics and replies.