-1

I've seen a neat effect at the end of the describing text here where the last line of the text is gradually increasingly transparent and i'm curious on how it's done.

There's been a discussion on the subject but i don't get the jsFiddle to work as supposed to and many of the other replies seem to miss the OP's intention.

Is it doable? And if so, is it doable without vendor prefixes?

Community
  • 1
  • 1
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438

2 Answers2

1

They're doing it using CSS3 background gradients but you could achieve the same effect using an image. Just a little png image would sort you out.

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
1

Yes, you can do it, and without the vendor prefixes: Place a div over the text area. In this div class="fadeout"> you put an image that has a gradient of increasing white, being transparent in the top of that image and only white (or the background-color of your page) at the bottom. The text in the underlying text area will look like being faded out.

The Image can be replaced by CSS-Gradient:

.fadeout {
    background-image: 
      -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 20%, #FFFFFF 95%);
}

but this has vendor-specific prefixes.

lars k.
  • 562
  • 4
  • 18
  • I'd prefer a neater method. suppose that there's a background image and i'd like to fade the bottom text **without** obscuring it. Doable? – Konrad Viltersten Jul 28 '12 at 13:33