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

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

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

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

источник

2011-04-12 Brian Scott

enter image description here

Вот пример кода 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>

источник

2011-04-14 18:22:54

это не CSS3 – Blowsie

@Blowsie: Правда, но объяснение/ответы расширились от первоначального запроса, как только выяснилось, что CSS 3 не предложит то, что требуется. Я исправил исходный вопрос, чтобы исправить это. –

Насколько я знаю, что это возможно только в 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

источник

2011-04-12 12:05:25 Blowsie

Я пытаюсь inprove код, мои результаты: http://jsfiddle.net/DoubleYo/qGfzm/ И я попробовать с '-webkit-маски-image', но вы можете изменить только непрозрачность в градиент. – DoubleYo

@ DoubleYo: Спасибо, что нашли время, ваша демонстрация пока выглядит хорошо. Это определенно возможно только в браузерах webkit? –

@DoubleYo ваш пример не отличается от моего, если честно, @Brian Scott Im 99% уверен, что только webkit имеет только решение CSS – Blowsie

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

ответ

Смежные вопросы