Fade text near end of div?

css, html

Solution

CSS gradients and `rgba` will do the job for this

Demo

Extended Text Version (Updated)

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;

}

Note: I've stripped off cross-browser CSS gradient code, you can get it from http://www.colorzilla.com/gradient-editor/

About the `rgba()` it's introduced recently in CSS3 spec, where I hope you know what RGB stands for and `a` stands for alpha, so instead of using `HEX` I am using `RGBA` and am just playing with the alpha part here

Problem

Is it possible to fade the text horizontally near the end of the div using the CSS. For example like this:

Original source

Related problems