CSS3 Fade Bottom of <section> - css, css3, background, background-image, linear-gradients

Ho cercato in alto e in basso, ma non ho trovato un CSS3 metodo per usare a linear-gradient svanire il fondo di a <section> tag al bianco.

Se non sono chiaro, vorrei illustrare questo con un esempio: se ho un <section> tag che è pieno di un sacco di testo, mi piacerebbeil testo da tagliare ad un'altezza designata. Per mostrare che c'è ancora più testo da leggere, il contenitore mostrerebbe una sfumatura bianca che copre parzialmente l'ultima riga o così per mostrare che c'è più testo da leggere.

So che questo può essere fatto con PNG o GIF, ma non so come farlo con i CSS3. Qualcuno potrebbe fornire un esempio?

Grazie per il tuo tempo.

risposte:

Puoi farlo con un elemento extra e qualche JavaScript. Come questo:

#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;
}

E il 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);​

Ecco una demo funzionante.