Прикрутить градиент к тексту

[Stager36]

Задался задачей сверстать надпись CARS (ниже картинка где видно, что С и S подсвечены) без использования изображений. Вот тут нашел годную методику - с помощью свойства CSS3 background-clip: text; фон применяется к тексту, соответственно, можно сделать радиальные градиенты и применить их к надписи, но это работает только в ВебКите. Как это реализовать кроссбраузерно? Поможет ли использование Модернайзера (раньше не имел с ним дело)?

[npofopr]

Картинкой. Забудьте про css3, раз хотите поддерживать старые браузеры.

[Zverushka]

Даже на css3 не сделать. Один единственный браузер не считается.

[Stager36]

То, что только на одном CSS3 это не реализовать, я уже понял. Интересует, есть ли JavaScript решения этой проблемы? Наслышан про этот самый Modernizer, кто работал с ним, что скажете?

И, опять же, если говорить о реализации картинкой. Как более профессионально поступить? Ведь можно надпись сделать шрифтом, а из фотошопа выдернуть только два пятна света переходящие в прозрачность и расположить их над надписью. Или это перебор и нужно все вырезать в изображение и не заморачиваться? Что скажите?

Собираюсь эту верстку использовать в своем первом портфолио, поэтому,  так скрупулезно отношусь. 

[Melodyn]

Можно сделать не градиентом, а в два, возможно, в три цвета. Только на CSS, написал на этот счёт тему, но её пока одобряют модеры.

[scion]

ИМХО сделать одним изображением да и не заморачиваться, к тому же это логотип насколько я понял.

[Melodyn]

Трехцветный текст, а-ля имитация линейного градиента: http://jsfiddle.net/yUqwE/1/ Остальные вопросы к товарищу Фотошопу.

[npofopr]

Трехцветный текст, а-ля имитация линейного градиента: http://jsfiddle.net/yUqwE/1/ Остальные вопросы к товарищу Фотошопу.

Это же совсем не то, что требуется. Ваш вариант еще и малоюзабелен, даже вообще не юзабелен. Это для каждого слова придется отдельно его вписывать в before? Так быстро руки устанут.

Про обычный градиент массы способов на том же codepen: 1, 2, 3 и дальше поиском можно кучу найти вариантов.

 

По теме: не надо придумывать то, что вам не надо. Зачем на обычный логотип навешивать кучу скриптов, стилей и т.п.? Делайте обычным png или уж svg.

Edited January 12, 2014 by npofopr

[Catherine]

Использование Modernizr не поможет решить проблемы, он определяет, поддерживается ли определенное свойство конкретным браузером, и, в зависимости от этого, добавляет соответствующий класс. В принципе, это позволяет использовать различные реализации в зависимости от поддержки. По Modernizr есть много информации в сети, в том числе, и на русском.

 

Я бы для логотипа использовала картинку. Можно, конечно, и с помощью SVG, но какова практическая ценность данного решения?