Fade text near end of div?

Question

Можно ли вывести текст по горизонтали ближе к концу div с помощью CSS.

Например, как это:

Answer 1

CSS градиенты и rgba сделает работу для этого

Demo

Extended Text Version (Обновлено)

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 и я просто играл с альфа части здесь

Answer 2

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

-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%); 

Answer 3

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

http://jsfiddle.net/JcPAT/