Josh Pigford 10

Here's what I need to pull off in CSS (it's terribly ugly, but it shows my problem well as an example):

Gradient example

We've got a gradient over text with a drop shadow on a background that has a slight gradient.

I've tried every method I could find.

This method won't work with a text-shadow.

The PNG overlay method won't work because I don't have a solid color background.

This method won't work because it requires me putting the text string in the CSS and my text will be dynamic.

So, I'm stumped.

It doesn't need to work in every browser (I'm fine with ignoring IE, if necessary). If it only works in Webkit browsers, that'd be fine as well.

3 answers

Matt Kreiling 0
0
points

I don't know if you are still looking for an answer, but I was able to create a similar result. It is not semantic, but it works on webkit browsers.

I used two h1 elements, but I think this might be able to be accomplished using the content property to avoid the extra markup.

Here is is: http://www.test.terribleobject.com/problems/2012/gradient-text-with-shadow-and-radial-gradient-background

Answered about 1 year ago by Matt Kreiling
danwellman 5600
0
points

I think <canvas> will be your friend here :)

The graduated red background should be easy with the createRadialGradient() method

You can easily apply all kinds of crazy typographic effects, which should include a simple gradient and shadow :)

Answered over 1 year ago by danwellman
Tony Crockford 7095
0
points

Conceptually, could you repeat the text with a shadow and position the text with a gradient over the top of it?

Assuming the dynamic part of your question means the text is programatically produced, repeating it wouldn't be impossible and I'm sure all those effects mean its for headings, or occasional text.

A thought...

Answered over 1 year ago by Tony Crockford