views:

66

answers:

3

Ok here is my challenge, I have some <h1> tags that I want to convert into a custom font and apply a gradient from left to right.

Initially I was going for the idea of using cufon as this does both, but it turns out cufon only supports top to bottom gradients.

My only other option as far as I am aware is sIFR which I believe may support this, but its not preferable.

Does anyone have any recommendations? I have looked at typeface js which doesn't do gradients (I think) and CSS3 like moz-linear-gradient but this doesn't support applying it as a color.

Thanks!

A: 

See this: Javascript example: text color to gradient. Might help you out.

Kyle Sevenoaks
+1  A: 

Can't you just manually hack the cufón code to change gradient direction for now?

I haven't tried or tested this myself, but I suspect the lines you'd want to change would be something like:

@973, for VML implementation
... fill.angle = 270;

@1364, for canvas implementation
... fill = g.createLinearGradient(viewBox.minX, 0, viewBox.maxX, 0);
bobince
That actually works but it's not spread evenly across the whole word - http://jsfiddle.net/DegtZ/
fire
hmm, ok, how about: `createLinearGradient(0, 0, stretchedWidth, 0)`
bobince
thanks almost perfect, except it needs to apply the gradient across the whole sentence rather than each word.. http://jsfiddle.net/DegtZ/1/
fire
I guess you would have to stop it treating each word as a separate object (`text.split(separators[separate])`?)... but then you would lose the ability to word-wrap. I guess this is why there is no horizontal gradient support by default: if you wanted to make it work completely you would have to trap window resizing and recreate the text each time in response to new word wrapping.
bobince
A: 

Setting a smooth gradient for your foreground (ie the text colour) isn't possible as far as I know.

You can, of course, set each letter to a different colour to simulate a gradient - there's a JQuery plugin you can use to make this fairly painless - but this isn't actually a gradient, and may not look great, especially for larger text like headings.

One suggestion I would make would be to have a div hidden behind the heading element, with the gradient applied to its background-colour. Then style the heading so that it has a solid background colour and a transparent foreground colour.

Not sure if that'll work - I don't know whether the text colour can be set to transparent or not, and if it can be, it may not be supported across all browsers. But give it a try anyway.

Hope that helps.

Spudley