Fade a link out at the end of container

Question

I'd like to know if there is any way to fade a link out instead of truncating if it is too long to fit in container. This is what I mean (the image taken from the user966582's question):

faded link

The simplest solution is to insert an absolute-positioned element with a gradient background into the container, but in that case it would cover the link so that it becomes unclickable under the gradient.

Another way I found is to use -webkit-mask:

.wide-faded {
    -webkit-mask: -webkit-linear-gradient(right,
        rgba(255,255,255,0),
        rgba(255,255,255,1) 103px,
        rgba(255,255,255,1)
    );
}

The result is exactly what I needed (link is clickable!) but it lacks a crossbrowser support.

Is there any way to achieve the same in a crossbrowser manner? Thanks in advance.

Zach Saucier · Accepted Answer · 2013-12-18T20:11:27.817

You could apply the gradient to a background of a pseudo element instead

.fade {
    position:relative;
    display:inline-block;
}
.fade:after {
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:20px;
    height:100%;

    background: -webkit-gradient(linear, 0 0, 100% 0, 
        from(rgba(255, 255, 255, 0)), 
        to(rgba(255, 255, 255, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
}

Thanks for your answer, but it still does not work with links. A link is inactive under the gradient. — Dmitry, Dec 18 '13 at 19:57
@ZachSaucier: can you tell me the site where I can generate Microsoft gradient too ? — Ani, Dec 18 '13 at 20:06
@Ani Colorzilla's [Gradient Generator](http://www.colorzilla.com/gradient-editor/) is what I use primarily — Zach Saucier, Dec 18 '13 at 20:07

score 2 · Answer 2 · answered Dec 18 '13 at 19:52

You could try this:

HTML

<div>
  <a href="#">
   This is some clickable Text 
  </a>
</div>

CSS

div {
  position:relative;
  width:250px;
  overflow:hidden;
}
a {
  white-space:nowrap;
  display:inline-block;
}
a:after {
  content:" ";
  display:block;
  position:absolute;
  z-index:1;
  right:0;
  height:100%;
  width:150px;
  top:0;
  background: -webkit-gradient(linear, 0 0, 100% 0, 
    from(rgba(255, 255, 255, 0)), 
    to(rgba(255, 255, 255, 1)));
}

Check this demo http://jsfiddle.net/6GjHV/10/

Fade a link out at the end of container

2 Answers2