Как в CSS сделать текст многоцветным (если это возможно)?

Question

[Илья]

Хочу сделать так, чтобы текст был, например, двух цветов: верхняя часть каждой буквы - голубая, а нижняя - красная. Но поскольку я не знаток css, то мне нужна помощь в этом вопросе. Подскажите, как это сделать. Это вообще в css возможно или только графикой? Нарисовал пример ужасно, но хоть что-то.

Answer 1

[Евгений Низамиев]

cssdeck.com/labs/uyw67yg5
Вот мой вариант

Comments

[Илья]

@RadiationX супер, то, что нужно. Большое спасибо всем!

[Кирилл]

если сделать то же самое через :after получится посимпатичнее ведь, нет?)

[Сергей Протько]

@manny я хотел предложить такой вариант, но потом вспомнил что через content не выйдет вывести содержимое элемента. Насколько я помню, либо строку, либо символ либо значения атрибута. Если это не так, буду рад об этом услышать.

[Кирилл]

@Fesor именно так. Но можно попробовать jsfiddle.net/5pXRL

Answer 2

[Сергей Протько]

обычно это делается этим способом (если фоновое изображение позволяет).

Для webkit есть -webkit-background-clip: text. В этом случае вы задаете фон блока в виде градиента, и это свойство будет говорить браузеру, что бы тот отрисовывал фон только в границах текста. Но это не кроссбраузерно.

Comments

[Сергей Протько]

Еще можно попробовать поиграть с text-shadow, но думаю картинкой сделать проще.

Answer 3

[Александр Петров]

Горизонтально, разве что.

Comments

[Илья]

Неплохо, для начала, но нужно желательно без градиента.