@dero
о себе

Как сделать кроссбраузерный текст градиентного цвета?

Была задача написать текст вот таким способом:
5aca82a8a04aa485348375.png

Поискал в интернете, нашел что-то похожее, допилил и вот в принципе получилось то что и задумывалось, но вот в safari данный текст не отображается. Вот такой браузер:
spoiler
5aca82f6b5281908761057.jpeg


Прошу совета, как сделать хотя бы так, что бы в таких браузерах текст был одним цветом. В идеале конечно градиентный. Спасибо за ответы.

Сам пример с кодом: https://jsfiddle.net/w3mhysrp/1/
  • Вопрос задан
  • 186 просмотров
Пригласить эксперта
Ответы на вопрос 2
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Попробуй это, как вариант.
<!DOCTIPE html>
<html>
<head>
    <meta charset="UTF-8">
	<style>
	body{font: 24px Arial;}
	    .test{
		margin:0;
		padding:0;
		color:transparent;
                white-space: pre;
		position:relative;}
	</style>
</head>
<body>
<div>текст текст текст <span class="test">Текст в span</span>. Текст дальше</div>
 <script>
  var test= document.querySelector(".test");
var w=test.offsetWidth;
var h=test.offsetHeight;
var textMy = test.innerHTML;
var textElem = document.createTextNode(textMy);
var canv = document.createElement('canvas');
canv.id = 'myCanvas';
canv.width = w;
canv.height = h;
canv.style = "position:absolute;left:0;z-index:-1";
test.insertBefore(canv, test.firstChild);
var computedStyle = getComputedStyle(document.body);
var ctx = canvas.getContext('2d');
  ctx.font = computedStyle.font;
var gradient = ctx.createLinearGradient(0, 0, w, 0);
  gradient.addColorStop(0, "rgb(255, 0, 128)");
  gradient.addColorStop(0.5, "rgb(0,0,255)");
  gradient.addColorStop(1, "rgb(255, 153, 51)");
  ctx.fillStyle = gradient;
  ctx.textBaseline = "bottom";
  ctx.fillText(textMy, 0, h);
  test.appendChild(canv);
  
 </script>
</body>
</html>
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Проверьте: ничего не забыли?)
background: -webkit-linear-gradient(........); /*Safari 5.1-6*/
background: -o-linear-gradient(..........); /*Opera 11.1-12*/
background: -moz-linear-gradient(........................); /*Fx 3.6-15*/
background: linear-gradient(....................); /*Standard*/
Ответ написан
Ваш ответ на вопрос

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

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