How to make cross browser text gradient color?

I

Ivan Erokhin2018-04-09 00:02:47

css

Ivan Erokhin, 2018-04-09 00:02:47

The task was to write the text in this way:

I searched the Internet, found something similar, finished it, and in principle it turned out what was intended, but this text is not displayed in safari. Here's a browser:

spoiler

I ask for advice on how to at least make the text in such browsers one color. Ideally, of course, gradient. Thanks for answers.
The code example itself: https://jsfiddle.net/w3mhysrp/1/

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

O

Oleg, 2018-04-09
@politon

Try this as an option.

<!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>

X

xmoonlight, 2018-04-09
@xmoonlight

Check if you forgot anything?

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*/