Making an opacity text-gradient over a transparent background

it should look like http://img190.imageshack.us/img190/1686/textgradient.jpg

the tricky part is, it should work for opera, canvas..? also important: the transparency is only needed for the big texts in the screenshot.

the text is simple html text in a span tag. the background is a somewhat transparent png, defined as css background-image of the container div.

i'd have no problems with using canvas or something like that fo开发者_C百科r displaying the text.

If only Cufón supported a horizontal linear gradient "out of the box" you would have been sorted for an easy <canvas> solution. Funnily enough, a conversation on cufon supporting a horizontal linear gradient was just started in the last 24 hours. The demo below demonstrates Cufón with a vertical linear gradient using rgba.

Demo: jsfiddle.net/Marcel/35PXy (fullscreen)

well, it was a long day, and i've found a solution by myself. it uses canvas.

for a canvas with html height 73px and width 720px:

var ctx = myCanvasEl.getContext("2d");
ctx.font = "53pt Arial, Helvetica, sans-serif";
var gradient = ctx.createLinearGradient(400, 0, 650, 0);
gradient.addColorStop(0, "rgb(255,255,255)");
gradient.addColorStop(1, "rgba(255,255,255,0)");
ctx.fillStyle = gradient;
ctx.fillText(myText, 0, 58);

The simplest way to do this that I can think of is to create a copy of the background image, go into photoshop and create a gradient that's mostly transparent. Then overlay the gradient on the text. That'll work in every browser, I believe.

You don't need canvas anymore. Use property background-clip: text combined with a gradient background with rgba (alpha channel to full transparency).

Here an example: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/index2.html

It's great but it works just in webkit browser, at this time.

For a more compatible solution you can look at mask-image http://trentwalton.com/2011/05/19/mask-image-text/ Similar to the first method, you should fade mask to full transparency to get the effect you want to realize.