Question

I have been searching high and low, but I have not found a CSS3 method for using a linear-gradient to fade the bottom of a <section> tag to white.

If I’m not being clear, let me illustrate this with an example. If I have a <section> tag which is full of lots of text, I would like the text to be cut off at a designated height. To show that there is still more text to be read, the container would display a white gradient which partially covers the last line or so to show that there is more text to read.

I know that this can be done with PNGs or GIFs, but I don’t know how to do this with CSS3. Could someone provide an example?

Thank you for your time.

Answer 1

You can do it with an extra element and some JavaScript. Like this:

#some-section {
    position: relative;
}

#some-section .after {
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), white);
    background-image:    -moz-linear-gradient(rgba(255, 255, 255, 0), white);
    background-image:     -ms-linear-gradient(rgba(255, 255, 255, 0), white);
    background-image:      -o-linear-gradient(rgba(255, 255, 255, 0), white);
    background-image:         linear-gradient(rgba(255, 255, 255, 0), white);
    bottom: 0;
    left: 0;
    height: 20px; /* Whatever suits you */
    position: absolute;
    right: 0;
}

And the JavaScript:

var section = document.getElementById('some-section');
var after = document.createElement('div');
after.className = 'after';

section.appendChild(after);

section.addEventListener('scroll', function() {
    after.style.bottom = -section.scrollTop + 'px';
}, false);​

Here’s a working demo.