10

Is it possible to fade the text horizontally near the end of the div using the CSS.

For example like this:

enter image description here

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
user966582
  • 3,225
  • 4
  • 32
  • 33
  • Gradient overlay, image overlay, browser-specific filters... – John Dvorak Mar 30 '13 at 20:10
  • I vote for an image overlay unless browser is specified – John Dvorak Mar 30 '13 at 20:10
  • What about using `text-overflow:ellipsis` instead? – John Dvorak Mar 30 '13 at 20:11
  • Relevant thread on UX SE: **[Studies or experience on using faded text to indicate more content?](http://ux.stackexchange.com/questions/20265/studies-or-experience-on-using-faded-text-to-indicate-more-content)**. Relevant tutorial from D. Walsh: **[Elegant Overflow with CSS Ellipsis](http://davidwalsh.name/css-ellipsis)** – FelipeAls Mar 30 '13 at 20:22

3 Answers3

6

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

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • I think you should update it to be Webkit compatible; those are some popular browsers – Explosion Pills Mar 30 '13 at 20:43
  • Here we go, -2 and Explosion Pills, it's just that I didn't wanted to dump a whole lot of code here, but I'll just make a demo out of it – Mr. Alien Mar 30 '13 at 20:44
  • You can't just add `-webkit-linear-gradient` to make this work though; the `135deg` is not quite compatible, so it requires additional changes. Frankly I would make the webkit-compatible version *first* – Explosion Pills Mar 30 '13 at 20:46
  • @ExplosionPills I know, actually I generate gradient codes from colorzilla and as you know it saves the last used in session, it saved diagonal which I used previously for my project as the default so changed it, thanks for drawing my attention to it – Mr. Alien Mar 30 '13 at 20:49
4

Skipping IE9-, which may require an image or SVG, you can add a position: absolute div that covers the full width and has a partially-transparent gradient that fades to white. This div must be contained by the element you want to cover, which must be position: relative.

http://jsfiddle.net/JcPAT/

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
2

Not really cross browser friendly but you can use something like:

-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%);
James Coyle
  • 9,922
  • 1
  • 40
  • 48