CSS3 возможно ли добавить текстовый градиент?

Question

Я ищу для добавления градиента в тексте.Чистые советы имеют быстрые советы об этом.Но это только для веб-браузеров.Поскольку это довольно старый пост, я проверяю, есть ли для этого какое-либо кросс-браузерное решение (не считая т.е.).

Я знаю, как использовать фоновое градиентное изображение

Answer 1

Я знаю, как это работает в Firefox, только через SVG, что, к сожалению, немного неуклюже. Хорошая часть заключается в том, что он должен работать в Opera и IE9 тоже (не проверено). Будет работать в Firefox 3.6, если тип документа объявлен как XHTML и используется как XML (тьфу).

<svg height="200" width="500">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1"/>
      <stop offset="100%" style="stop-color:rgb(60,60,60); stop-opacity:1"/>
    </linearGradient>
  </defs>
  <text x="0" y="150" font-family="Arial Black, Arial" font-size="55" fill="url(#gradient)" letter-spacing="-1" class="svg_text">
    NICE GRADIENT
  </text>
</svg>

Проверьте это на JSFiddle http://jsfiddle.net/sHaWW/