Monday, 19 January 2009

text with transparent gradient - SVG, VML and <canvas>

Today I was checking into how to get a transparent gradient on text to display on the web.

Text in an SVG with a gradient mask filter works on Opera 9.6 and Firefox 3. It doesn't work on webkit browsers (Chrome and Safari), the text will display but solid. Webkit browsers won't apply a standard gradient to a text element in an svg file, and they won't use a text element as a clipping path either. SVGs don't work in IE unless you install the Adobe SVG viewer (discontinued).

The <canvas> element can be used in Firefox, Opera and webkit browsers (not IE again). You can create a gradient going from full opacity to no opacity (or whatever you like) using <canvas>, but it doesn't support text, so no good for me. I'm not sure whether it is possible to make canvas elements with %age or em sizes either, as the createLinearGradient and fillRect methods both use px values (you set x1,y1,x2,y2). Mozilla have a good <canvas> tutorial.

VML only works in IE. Unfortunately Illustrator doesn't export to VML, and I've not been able to find any programs to convert SVG files to VML. You can set gradients in VML (including gradients on text), and you can use a filter on images (including VML that contains text) to set an opacity gradient (box.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=0,style=1,finishOpacity=100,startx=0,starty=0,finishx=150,finishy=150)';). I think IE also has a filter to flip text upside down, which is what I want for my text reflection.

So using an opacity gradient on text is relatively easy in Firefox and Opera (can just use the svg files that Adobe Illustrator produces), not difficult in IE (just have to type the code manually), but seemingly impossible in webkit. Webkit does have a CSS extension to handle gradients, however none of their examples worked in Google Chrome or Safari for me.

If you have a plain coloured background, then adding gradients to text is relatively easy: CSS Gradient Text Effect. However, this is no good if your background is a pattern or, as in my case, a gradient. What I am hoping to do is to use a copy of the background gradient, but with a transparent gradient applied to it, and saved as a png. This will then need to be absolutely positioned to make sure it lines up with the real background gradient. It will overlay the text, being solid at the bottom, fading to transparent at the top. This should give the impression of the text fading.

Another alternative would be to use Flash. I haven't tried this because I don't know Flash, and I'm not sure how it would work with text based zooming (It's important to me that the text and it's reflection zoom when the text size is increased). Possibly I may look at Flash tomorrow, but I might not bother.

I spent most of the day reading about svg, vml and canvas and also changing different things in example code to see how they worked and try and get the effect I was looking for. But I also went on Animal Crossing and sold last week's red turnip for 16,000 bells. In the evening I watched the last episode of Season 4 of Lost with Mac and Ben and also some rubbish extra stuff. Now we're ready for season 5 starting in a few days. I watched the latest season of The Office (US) with Mac as well.

I also got my google adsense account re-activated, which took quite a while and going round in circles.

Food
Breakfast: 2 slices of malt loaf with butter; cup o' tea.
Lunch: Mature cheddar cheese with crunchy salad sandwich; white grapes; cup o' tea.
Dinner: Ham quiche; potatoes; peas; butter. Pudding was, erm, I don't think I had anything for pudding. Coffee; 2x Oreos.
Supper: German biscuit; cup o' tea.

No comments: