Question

Here’s what I need to pull off in CSS (it’s terribly ugly, but it shows my problem well as an 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.

Answer 1

That should be the answer:

HTML

<h1><span>Filthy</span></h1>

CSS

h1 {
   position: relative;
   font-size: 300px;
   line-height: 300px;
   text-shadow: -3px 0 4px #006;
}
h1 span {
   position: absolute;
   top: 0; 
   z-index: 2;
   color: #d12;
   -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
h1:after {
   content: attr(cssFilthyHack);
   color: #000;
   text-shadow: 3px 3px 1px #600;
}

JS

$('h1').each(function(i, e){
    var el = $(e);
    el.attr('cssFilthyHack', el.find('span').html());
});

---

The important thing is to use content: attr(cssFilthyHack); to extract the text from the h1 text. You could add the text a second time in html like this

<h1 cssFilthyHack="Filthy"><span>Filthy</span></h1>

Or you use the js jQuery method to do this automatically.

---

UPDATE

Replaced the a tag with span, added js function.

See the example here in action: http://jsfiddle.net/alligator/Gwd3k/