Исчезающий текст

Question

[Дмитрий]

Изучал сайт www.polygon.com/ и задался вопросом: «Как воспроизвести этот исчезающий текст?»



Видно так же что параграф не прерывается и он становится прозрачным.

Буду признателен если кто-нибудь скинет туториал, беглый поиск по гуглу ничего не дал.

Answer 1

[Евгений Колотилин]

Не стесняйтесь пользоваться инспектором. Вот вам http://jsfiddle.net/KQDtF/. У псевдоэлемента :after обратите внимание на pointer-events: none;

Comments

[Дмитрий]

Спасибо, сделал, только в эксплорере не понял почему не работает, я так понимаю эта строчка должна отвечать за него

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

пробовал так же

background-image: -ms-linear-gradient(top, rgba(231,231,226,0) 0%, #e7e7e2 100%);

Все-равно не работает

[Евгений Колотилин]

Какой IE?

[Setrino]

А вы overflow:hidden; не забыли? Можете пожалуйста показать свой код чтоб ьыло яснее (линк на pastebin сойдет).

[Дмитрий]

mosaic article.post.with-meta{
height: 350px;
position: relative;
overflow: hidden;
}

.mosaic article.post.with-meta:after {
background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,rgba(231,231,226,0)),color-stop(100%,#e7e7e2));
background-image:-webkit-linear-gradient(top,rgba(231,231,226,0) 0,#e7e7e2 100%);
background-image:-moz-linear-gradient(top,rgba(231,231,226,0) 0,#e7e7e2 100%);
background-image:-o-linear-gradient(top,rgba(231,231,226,0) 0,#e7e7e2 100%);
background-image:linear-gradient(top,rgba(231,231,226,0) 0,#e7e7e2 100%);
background-image: -ms-linear-gradient(top, rgba(231,231,226,0) 0%, #e7e7e2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e7e7e2', endColorstr='#ffe7e7e2',GradientType=0 );
pointer-events: none;
background-size: 100% auto;
bottom: 0;
content: "";
display: block;
height: 30%;
left: 0;
position: absolute;
width: 100%;

}

Не работает в IE9, в остальных браузерах ок

Answer 2

[Marfapr]

как вариант css-tricks.com/css-trick-fade-out-the-bottom-of-pages-with-a-fixed-position-image/

Answer 3

[Softlink]

Посмотрите такой способ еще habrahabr.ru/post/131390/

Answer 4

[Глеб Старков]

Firebug: