Могу ли я иметь горизонтальный многоцветный градиент на текст с помощью CSS3/HTML 5?

Question

Я пытаюсь заменить флэш-эффект на основе sIFR, который в настоящее время используется на веб-сайте с стилем CSS 3. У меня есть эффект градиента текста, хорошо работающий с использованием CSS 3, но исходная реализация sIFR имела несколько цветов, а не простой градиент одного цвета для следующего.

Может ли кто-нибудь предоставить мне пример стилизации текстового элемента, такого как H2, используя несколько цветов вдоль горизонтальной оси?

Спасибо, Брайан.

Answer 1

Вот пример кода SVG - протестирована с FF4, Safari 5 и Chrome. Обратите внимание, что вы должны обслуживать это как страницу XHTML для Safari для ее отображения. Это также должно работать с IE9, но я его не тестировал.

<svg 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1"> 

    <defs 
    id="FooDefs"> 
    <linearGradient 
     id="MyFirstGradient" 
     x1="400" 
     y1="350" 
     x2="400" 
     y2="420" 
     gradientUnits="userSpaceOnUse"> 
     <stop 
     id="stop1" 
     style="stop-color:#1acf86;" 
     offset="0" /> 
     <stop 
     id="stop2" 
     style="stop-color:#ff0051;" 
     offset="0.25" /> 
     <stop 
     id="stop3" 
     style="stop-color:#1da1c9;" 
     offset="0.625" /> 
     <stop 
     id="stop4" 
     style="stop-color:#e45f25;" 
     offset="1" /> 
    </linearGradient> 
    </defs> 
    <text 
     x="150" 
     y="420" 
     id="textBAR" 
     style="font-size:72px;fill:url(#MyFirstGradient);"> 
BIG TEXT TEST 
</text> 
</svg> 

Answer 2

Насколько я знаю, что это возможно только в WebKit

h1 { 
    font-size: 72px; 
    background-image: -webkit-gradient(
    linear, 
    left top, 
    right top, 
    color-stop(0.03, rgb(250,3,3)), 
    color-stop(0.52, rgb(240,255,127)), 
    color-stop(0.76, rgb(42,24,173))); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

http://jsfiddle.net/gEGHq/1