Затухать текст возле конца div?

Ответ 1

Градиенты CSS и rgba будут выполнять задание для этого

Демо

Расширенная текстовая версия (обновлено)

div {
    position: relative;
    display: inline-block;
}

div span {
    display: block;
    position: absolute;
    height: 80px;
    width: 200px;    
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
    top: 0;

}

Примечание. Я удалил кросс-браузерный CSS-градиентный код, вы можете получить это от http://www.colorzilla.com/gradient-editor/

Об rgba(), представленном недавно в спецификации CSS3, где я надеюсь, что вы знаете, что означает RGB, а a означает альфа, поэтому вместо использования HEX я использую rgba и просто играю с альфа-часть здесь

Ответ 2

Пропуск IE9-, который может потребовать изображения или SVG, вы можете добавить div position: absolute, который покрывает всю ширину и имеет частично прозрачный градиент, который исчезает до белого. Этот div должен содержаться элементом, который вы хотите покрыть, который должен быть position: relative.

http://jsfiddle.net/JcPAT/

Ответ 3

На самом деле не совместим с браузером, но вы можете использовать что-то вроде:

-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);