CSS3 Fade Bottom of <section> - css, css3, фонове зображення, фонове зображення, лінійні градієнти

Я шукав високий і низький рівень, але не знайшов CSS3 метод використання а linear-gradient розтушовувати дно a <section> тег до білого.

Якщо я не зрозуміла, дозвольте проілюструвати це прикладом. Якщо у мене є <section> Я хотів би тег, який насичений великою кількістю текстутекст, який потрібно відрізати на визначеній висоті. Щоб показати, що ще потрібно прочитати більше тексту, контейнер повинен відображати білий градієнт, який частково покриває останній рядок або так, щоб показати, що є більше тексту для читання.

Я знаю, що це можна зробити з PNG або GIF, але я не знаю, як це зробити з CSS3. Чи може хтось навести приклад?

Спасибі за ваш час.

Відповіді:

Ви можете зробити це за допомогою додаткового елемента та трохи JavaScript. Подобається це:

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

І 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);​

Ось робоча демонстрація.