Geek Answers Handbook

Transparency Firefox (transparency) Gradient - Image Fade

I have an element with content inside it.

An element - with its contents - must be completely opaque on the left, completely transparent on the right. Evenly graded from right to left.

Since the contents and background into which it merges are not fixed, it is impossible to make an image in advance.

I know that gradients can be used as a background (-moz-linear-gradient), but this does not help me - here I need the contents of the element to disappear.

I was able to do this in IE (Alpha Mask) and Webkit (image mask), but completely blocked in FF.

I am not against using SVG if there is a way.

Please, help?

+6
css firefox opacity transparency gradient
source share
3 answers

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 the mask.svg file:

<?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);
+4
source share

I think the dirty solution might be to use rgba values. With them, you customize webkit and moz gradients to a div that sits right above the content you were talking about.

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

0
source share

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

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

-2
source share

More articles:


All Articles