Question

I have an element with content inside it.

The element – with its content – should be fully opaque on the left , fully transparent on the right. Evenly graded from right to left.

As the content and background it is merging into are not fixed, there is no way to make an image in advance.

I am aware that gradients can be used as backgrounds (-moz-linear-gradient), but that doesn’t help me – here, I need the contents of the element themselves to fade out.

I have been able to do this in IE (Alpha Mask) and Webkit (image-mask), but have been completely stumped in FF.

I don’t mind using SVG if there is a way there.

Please help?

Answer 1

This page explains how to achieve this for FF 3.5+

https://developer.mozilla.org/en/applying_svg_effects_to_html_content

You probably want something like this in a file called mask.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     baseProfile="full">
     <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
        <linearGradient id="g" gradientUnits="objectBoundingBox" x2="1">
          <stop stop-color="white" offset="0"/>
          <stop stop-color="white" stop-opacity="0" offset="1"/>
        </linearGradient>
        <rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
      </mask>
</svg>

Then include the following in your CSS:

mask: url(/path/to/mask.svg#m1);