Плавное затухание текста CSS3

Наверно Вы часто видели плавно затухающий текст, который скрывается за таблицей, следующей строкой, блоком или полем другого элемента. Многие делают это с помощью скриптов или наложения прозрачной картинки.

 Эти методы плохи и устаревшие уже. Зачем лепить в загрузку еще одну микро картинку или подключать к шаблону еще 105-й по счету скрипт, который возможно будет требовать библиотеку JQuery, тут возможен и конфликт скриптов.

Сейчас на дворе 21 век и время HTML 5 и CSS3.

Так давайте делать сайты для новых браузеров, используя новые стандарты, которые более проще и понятнее:

HTML код:

<div style="position: relative; display: table;"> 
Примерный текст <div class="right-shadow"></div>
</div>

 CSS код:

.right-shadow {
background-image:linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image: -moz-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image: -o-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image: -khtml-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image: -webkit-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image: -ms-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
height: 100%;    position: absolute;    right: 0;    top: 0;    width: 20px;    z-index: 2;
}

 Вот это даст такой результат:

 
<style>
.right-shadow {
background-image:linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image:-moz-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image:-o-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image:-khtml-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image:-webkit-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background-image:-ms-linear-gradient(left top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
height: 100%; position: absolute; right: 0; top: 0; width: 20px; z-index: 2;
}
</style>

<div style="position: relative; display: table;">
Примерный текст <div class="right-shadow"></div>
</div>