Как я могу сделать текстовый градиент с тенью на градиентном фоне?

Question

Вот что мне нужно сделать в CSS (это ужасно уродливо, но хорошо показывает мою проблему в качестве примера):

У нас есть градиент текста с тенью на фоне с небольшим градиентом.

Я перепробовал каждый метод, который смог найти.

Этот метод не будет работать с тенью текста.

Метод наложения PNG не будет работать, потому что у меня нет сплошного цветного фона.

Этот метод не будет работать, потому что он требует, чтобы я поместил текстовую строку в CSS, и мой текст будет динамическим.

Итак, я в тупике.

Он не должен работать в каждом браузере (я могу игнорировать IE, если это необходимо). Если бы это работало только в браузерах Webkit, это тоже было бы хорошо.

Answer 1

Это должен быть ответ:

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());
});

---

Важно использовать content: attr(cssFilthyHack); для извлечения текста из текста h1.Вы можете добавить текст во второй раз в html, как это

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

Или вы можете использовать метод js jQuery, чтобы сделать это автоматически.

---

ОБНОВЛЕНИЕ

Заменен тег a span, добавлена ​​функция js.

См. Пример в действии: http://jsfiddle.net/alligator/Gwd3k/