2

Is there a way either in css or using an image file, to mask content without using a color?

Let me explain..

Here is an RSS feed, and my user has the option of setting the background. As you can tell, the feed will be cut ugly at the bottom. I would like to hide this cut with a smooth transition, much like transitioning from a foreground color to a background color. But I can't do that in a simple way since I can't know beforehand what color to transition from. And if the user has an image for background, it is impossible doing it that way.

So I am thinking maybe there is a way to put a div on top of the text content, and have a gradient moving from 0 opacity at the bottom and opacity 1 a bit further toward the top?

I basically could use the opacity property of css, but I would like to have it gradiented =)

enter image description here

------------ UPDATE -----------------

It seems this is not possible since noon eout of the 40 viewers have an idea. I guess maybe a different way to go about it would be to let the background actually be a foreground, with low opacity toward the top and 0 at the bottom. It won't make the same effect, and I'm not entirely sure it would work, it isn't possible to do a gradient from an image is it? I would have to have such images done manually, or use some nifty library to handle the opacity gradient using a php image handler?

Matt Welander
  • 8,234
  • 24
  • 88
  • 138
  • does this answer help? http://stackoverflow.com/questions/2293910/css3-transparency-gradient – dav1dsm1th Nov 09 '13 at 18:42
  • I'm afraid not, css gradients seem to be based upon transitioning from a set color. I want to create the illusion of transitioning to the background by having opacity of the textdiv set to 0 at the bottom, and opacity 1 at the top. – Matt Welander Nov 09 '13 at 19:41
  • I thought that's what the article is about - using the alpha/transparency of a pair of rgba()'s to create a gradient of transparency... which is what you appear to want. So the white background of your rss feed would transition from white (at the top) to transparent (at the bottom) - allowing more of the background to show through. Or am I missing something? – dav1dsm1th Nov 09 '13 at 19:52
  • No I want also the contents of the RSS feed to fade (as if the entire text DIV had a gradiented opacity value). The white boxes in the example above is only incidental. I want to gradually hide the actual RSS feed as to not have it cut at the bottom. – Matt Welander Nov 12 '13 at 14:01
  • I don't think this is going to be possible. To fade to the background, you would actually have to have the background info to fade into. – Pekka Nov 13 '13 at 14:00
  • Does anyone know if a gradiented opacity for a layer is coming in a later css version? – Matt Welander Nov 18 '13 at 19:58

0 Answers0