zzloy
@zzloy
Дизайнер

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

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

Вот такие чудеса:
e27ead6aff7c48458fb4432d49d8bf10.png
Можно написать вот так:
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 думает, что градиент на тексте выглядит именно так:
c974f8f059954621b1c4203f65d53d70.pngДа-да, где то там наша градиентная фраза «We offer»

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

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

Кроме решения с jQuery ничего не нашёл, но хочется нативом.
  • Вопрос задан
  • 1694 просмотра
Решения вопроса 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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы