Разноцветные буквы

[Ann]

В старых версиях html можно было с помощью тега font color задать цвет каждой букве <font color="#ff0000">ц</font><font color="#FFCC00">в</font><font color="#00CC00">е</font><font color="#0066FF">т</font>

получался веселый разноцветный текст.

Как сделать такое грамотно теперь?

[Veseloff]

Ну так, в принципе, тоже должно работать. Сейчас это вроде как не семантично, так что

<span style="color: #f00;">Ы</span>

[Int]

<div class="a">
<span>а</span>
<span>б</span>
<span>в</span>
<span>г</span>
</div>

.a:nth-child(1) {color:#800;}
.a:nth-child(2) {color:#860;}
.a:nth-child(3) {color:#880;}
.a:nth-child(4) {color:#080;}

Может быть будет работать

[swetlana]

кажись такой вариант:

.a span {color:#800;}
.a span+span {color:#860;}
.a span+span+span {color:#880;}
.a span+span+span+span {color:#080;}

будет работать в большем количестве браузеров.

[Ann]

Спасибо Попробую все это...

Старый вариант был тем хорош, что создавал мнимум кода. Было легко вывесить на сайте временную пеструю надпись к празднику, например. Удобно было делать такое на детских сайтах. Есть даже программка такая - задаешь цвета и текст, она генерит код с тегами font и номерами цветов, создавая градиент от одного к другому.

Теперь, как не крути, тот же результат получается гораздо тяжелее и объемнее

[psywalker]

кажись такой вариант:

.a span {color:#800;}
.a span+span {color:#860;}
.a span+span+span {color:#880;}
.a span+span+span+span {color:#080;}

будет работать в большем количестве браузеров.

Да это извращение же.

А если их будет 20? 30 ?

Спасибо Попробую все это...

Старый вариант был тем хорош, что создавал мнимум кода. Было легко вывесить на сайте временную пеструю надпись к празднику, например. Удобно было делать такое на детских сайтах. Есть даже программка такая - задаешь цвета и текст, она генерит код с тегами font и номерами цветов, создавая градиент от одного к другому.

Теперь, как не крути, тот же результат получается гораздо тяжелее и объемнее

Твою радость использовали в 90-ых. А вот как раз сейчас подход стал намного приятнее и легче.

[swetlana]

Да это извращение же.

А если их будет 20? 30 ?

да разноцветный текст — в принципе извращение

[Vlad]

Если букв больше N, где N больше M, то правильнее использовать скрипты.

[SelenIT]

В теории, "где-то рядом" таится background-clip: text, позволяющий сделать текст как бы вырезанным из любой фоновой картинки, хоть попугая. Но на практике оно работает, насколько мне известно, только в webkit. То же самое можно сделать на SVG. Но скриптами, по-моему, универсальнее

[Vlad]

Нет такого значения как text у background-clip, видимо давно это в теории было.

[SelenIT]

Да, как оказалось, в стандарт (даже черновики) оно не вошло (что и к лучшему, пожалуй). Однако, в webkit работает . Может, David Hyatt рассчитывает продавить это в CSS4?

[psywalker]

Нет такого значения как text у background-clip, видимо давно это в теории было.

Слухи говорят обратное http://trentwalton.com/2010/03/24/css3-background-clip-text/

[Vlad]

А Mozilla заявляет, что нет https://developer.mozilla.org/en/CSS/background-clip

А W3C заявляет, что Mozilla права http://www.w3.org/TR/css3-background/#the-background-clip

[psywalker]

А Mozilla заявляет, что нет https://developer.mozilla.org/en/CSS/background-clip

А W3C заявляет, что Mozilla права http://www.w3.org/TR/css3-background/#the-background-clip

В вебкитах вроде пашет. А вообще да, видимо это что то из будущего)

[Int]

Есть даже программка такая

Где-то у меня она валялась, на больших текстах люто-бешено грузит браузер вся эта разноцветность. Полученный из неё код можно прогнать через две замены и получится нормальный вариант:

str_replace('</font>','</span>',$S);
str_replace('<font color="','<span style="color:',$S);

[mishka]

http://www.artlebedev.ru/tools/technogrett.../gradient-text/