Можно ли использовать горизонтальный многоцветный градиент для текста с использованием CSS3 / HTML 5? - PullRequest
Новая
       28

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

3 голосов
/ 12 апреля 2011

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

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

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

Ответы [ 2 ]

6 голосов
/ 12 апреля 2011

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

4 голосов
/ 14 апреля 2011

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