Я пытаюсь заменить флэш-эффект на основе sIFR, используемый в настоящее время на веб-сайте, стилем CSS 3. У меня есть эффект текстового градиента, хорошо работающий с использованием CSS 3, но исходная реализация sIFR имела несколько цветов, а не просто градиент одного цвета к другому.
Может ли кто-нибудь предоставить мне пример стилизации текстового элемента, такого как H2, с использованием нескольких цветов вдоль горизонтальной оси?
Спасибо, Брайан.
Вот пример кода 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>
Насколько я знаю, это возможно только в 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;
}
-webkit-mask-image, но вы можете изменить непрозрачность только в градиенте.
- person Yoann; 12.04.2011
inline-block, чтобы градиент на 100% был в конце текста.
- person Yoann; 12.04.2011
