CSS-градиент для текста в Firefox: миф или реальность?

Question

[Igor Lanko]

Приветствую.

Вот такие чудеса:

Можно написать вот так:

background: #2978d5;
    background: -moz-linear-gradient(left, #2978d5 0%, #004282 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, #2978d5), color-stop(100%, #004282));
    background: -webkit-linear-gradient(left, #2978d5 0%, #004282 100%);
    background: -o-linear-gradient(left, #2978d5 0%, #004282 100%);
    background: -ms-linear-gradient(left, #2978d5 0%, #004282 100%);
    background: linear-gradient(to right, #2978d5 0%, #004282 100%);
    -webkit-background-clip: text;
    color: transparent;

И всё бы великолепно, но Mozilla думает, что градиент на тексте выглядит именно так:
Да-да, где то там наша градиентная фраза «We offer»

А всё потому, что Mozilla едала свойство background-clip: text. «Но ведь ты поставил -webkit-, хе-хе» скажете вы, но, увы, FF не поддерживает ни -moz-, ни строку вообще без префикса.

Хочу градиент для текста в Мозилле!

Кроме решения с jQuery ничего не нашёл, но хочется нативом.

Answer 1

[wintermoon]

Используйте svg!)
Градиент

<svg style="display:none">
		    <defs>  
		        <linearGradient id="textgradient" x1="0%" x2="300%" y1="0" y2="0">  
		            <stop stop-color="#1dcbb0" offset="0%"/>  
		            <stop stop-color="#2ecc72" offset="33%"/>  
		            <stop stop-color="#2394e4" offset="66%"/>  
		            <stop stop-color="#1ccab4" offset="100%"/>  
		        </linearGradient>  
		    </defs>  
		</svg>

Вставляем куда нужно и ставим любой текст

<svg fill="url(#textgradient)">     
         <text>Отправить</text>  
</svg>

Пример
https://jsfiddle.net/swjzanjb/
Я вынес градиент отдельно и обращаюсь к нему fill="url(#textgradient)". Соответственно можно лепить сколько угодно :)
Поддержка caniuse.com/#feat=svg-html5

Comments

[Igor Lanko]

О, это круто! А что если у меня этот градиент в заголовках h1. Поисковики как минимум не поймут.

[Александр Таратин]

Igor Lanko: https://jsfiddle.net/QW01_01/9r3s8171/1/

[Igor Lanko]

Александр Таратин: точно. Спасибо за участие в решении!

[Igor Lanko]

Александр Таратин: а как к этому ещё автоматический перенос строк присобачить? Не будешь же к каждому отдельному случаю прописывать.

[wintermoon]

Igor Lanko: У меня тоже такой вопрос :)

[Antony Bark]

С svg и параметре linearGradient в Mozilla надо быть осторожнее.
Как пример, вот SVG созданный стандартно и валидно в последней версии Inkscape
ca0.ru/svg/test3-.svg
Откройте его в разных браузерах, Firefox в отличие от всех иных не видит linearGradient (это тёмные овалы на панцире у коровки)
Было дело, решил, что стандарт описания у Inkscape кривоват, но и версия, прогнанная через штатный оптимизатор\валидатор svgo-gui проблему не исправляет ca0.ru/svg/test3.svg
Проблема даже не в Inkscape, так как тот же рисунок, но экспортированный из Corel, показывает такой же кривой результат в FF ca0.ru/svg/test4.svg и ca0.ru/svg/test4.svg (сжат) соответственно

люди с stackoverflow поднимали баг перед FF, дело пока не сдвинулось https://bugzilla.mozilla.org/show_bug.cgi?id=353575