Текст градиентом ie 11

263

18 января 2018, 19:12

https://jsfiddle.net/4748o58L/

.balance_title_subtitle_text { 
   background: -webkit-gradient(linear, left top, right top, from(#52c1bf), to(#379c99)); 
   background: -webkit-linear-gradient(left, #52c1bf 0%, #cc0000 10%); 
   background: -o-linear-gradient(left, #52c1bf 0%, #cc0000 10%); 
   background: linear-gradient(to right, #52c1bf 0%, #cc0000 10%); 
   -webkit-background-clip: text; 
   -webkit-text-fill-color: transparent; 
}

<p class="balance_title_subtitle_text">ammed dit amed dollar</p>

как сделать, чтобы эти свойства css заработали в ie11?

Answer 1

Это имеется в виду?

.balance_title_subtitle_text { 
background: linear-gradient(to right, #52c1bf 0%, #379c99 100%); /* Standard syntax */ 
background: -webkit-linear-gradient(to right, #52c1bf 0%, #379c99 100%); /* For Safari 5.1 to 6.0 */ 
background: -moz-linear-gradient(to right, #52c1bf 0%, #379c99 100%); /* For Firefox 3.6 to 15 */ 
background: -o-linear-gradient(to right, #52c1bf 0%, #379c99 100%); /* For Opera 11.1 to 12.0 */  
background: -ms-linear-gradient(to right, #52c1bf 0%, #379c99 100%); /* IE 11 */ 
}

<div class="balance_title_subtitle_text pick_balance_other">balance</div>

Или попробуйте генератор: http://css3pie.com/

Answer 2

Единственное что мне пришло в голову это SVG и в IE11 только анимация не будет работать

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"> 
 
  <text x="50%" text-anchor="middle" y="50%" dy="0.4em" fill="url(#pattern)" font-family="sonos-logoregular" font-size="50vh">SONOS</text> 
   
  <defs>   
    <!-- Da gradient --> 
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0"> 
      <stop offset="0%" style="stop-color:#cc0000;"/> 
      <stop offset="25%" style="stop-color:#dd22ff;"/> 
      <stop offset="50%" style="stop-color:#eedd99;"/> 
      <stop offset="75%" style="stop-color:#792042;"/> 
      <stop offset="100%" style="stop-color:#33235b;"/> 
    </linearGradient> 
     
    <!-- Stitch 2 gradients together for seamless animation  --> 
    <pattern id="pattern" x="0" y="0" width="300%" height="100%" patternUnits="userSpaceOnUse"> 
      <rect x="0" y="0" width="150%" height="100%" fill="url(#gradient)"> 
        <animate attributeType="XML" 
                 attributeName="x" 
                 from="0" to="150%" 
                 dur="7s" 
                 repeatCount="indefinite"/> 
      </rect> 
      <rect x="-150%" y="0" width="150%" height="100%" fill="url(#gradient)"> 
        <animate attributeType="XML" 
                 attributeName="x" 
                 from="-150%" to="0" 
                 dur="7s" 
                 repeatCount="indefinite"/> 
      </rect> 
    </pattern>  
  </defs> 
</svg>