3

I am trying to fade the white text of a paragraph on an image background from white to transparent. I have it working in Chrome and Firefox but can't seem to get it working in Safari.

In my example you'll notice that the text does not display in Safari but if you highlight the text it will appear. JSFiddle here: https://jsfiddle.net/ngaffer/fgxbfoL4/5/

<section>
  <h3>Heading Three</h3>
  <div class="hideContent">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor sit amet gravida. Vivamus dictum, velit id bibendum sodales, diam mauris lobortis erat, eu blandit tellus neque vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor sit amet gravida. Vivamus dictum, velit id bibendum sodales, diam mauris lobortis erat, eu blandit tellus neque vitae lorem.</p>
  </div>
</section>

<style>
section {
  background-color: #111;
  display: block;
  overflow: hidden;
  color: #fff;
}

.hideContent {
  background: -webkit-linear-gradient(top, white 50%, rgba(255,255,255,0));
  background: -o-linear-gradient(top, white 50%, rgba(255,255,255,0));
  background: -moz-linear-gradient(top, white 50%, rgba(255,255,255,0));
  background: linear-gradient(top, white 50%, rgba(255,255,255,0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,0);
  height: 100px;
}
</style>

Image of the desired effect

ngaffer
  • 63
  • 10
  • You can include an image of how you want it to look like. It seems it will work if you remove the `-webkit-background-clip` and `-webkit-text-fill-color` lines. – Racil Hilan Jul 17 '17 at 05:23

1 Answers1

0

I would avoid doing this as the support is still not there yet. but...

I am able to achieve the desired effect by adding:

-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0)1em, rgba(0, 0, 0, 1));

to the text class.

You can control the amount of fade by increasing / decreasing the 1em after the first color in the gradient

Tested and working on Chrome 59 and FF 54 - with the -webkit prefix. I don't have Safari but it should be supported.

This won't work on IE or Edge but still...89% support is not too shabby.

section {
  background-color: #111;
  display: block;
  overflow: hidden;
  color: #fff;
}

.hideContent {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0)1em, rgba(0, 0, 0, 1));
  height: 100px;
}
<section>
  <h3>Heading Three</h3>
  <div class="hideContent">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor sit amet gravida. Vivamus dictum, velit id bibendum sodales,
      diam mauris lobortis erat, eu blandit tellus neque vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor
      sit amet gravida. Vivamus dictum, velit id bibendum sodales, diam mauris lobortis erat, eu blandit tellus neque vitae lorem.</p>
  </div>
</section>
I haz kode
  • 1,587
  • 3
  • 19
  • 39