6

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?

1
  • Does the latest Firefox have their own equivalent to -webkit-mask-image that can be used with CSS3 gradients? Commented Nov 13, 2011 at 6:32

3 Answers 3

4

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);
1
  • Does the latest Firefox have their own equivalent to -webkit-mask-image that can be used with CSS3 gradients? Commented Nov 13, 2011 at 6:23
0

I believe a dirty solution could be to take advantage of rgba values. With those, you setup a webkit and moz gradients on a div that is position right over the content you talked about.

I'm not sure if you can have alpha values for IE gradients. The only problem with the solution is that interactivity for the object behind this div is lost

1
  • Actually, the biggest issue with this solution is that the image does not become transparent. If the background that should be showing has a gradient as well, it will not show through
    – SamGoody
    Commented Mar 21, 2011 at 9:18
-2

A dirty solution would be to superimpose a div exactly on top of the element with the background fully transparent on the left and fully opaque on the right using linear gradients.

I know this is not pretty, but it should work ;)

1
  • 1
    I don't see how this would help. I need to see the background behind the element, which is a rather complex and changing background. How would covering it with another div achieve such a result?
    – SamGoody
    Commented Apr 14, 2010 at 6:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.