Чистый CSS3 градиент цвета текста - это возможно?

Question

Есть ли способ создания кросс-браузерного, чистого CSS3-градиента цвета текста?

Итак, нет png.Нет только «webkit».

РЕДАКТИРОВАТЬ: Чтобы быть более точным: это только CSS3, и это для текста, а не градиенты коробки.

РЕДАКТИРОВАТЬ: Я нашел это решение , но это только для webkit.

Answer 1

Нет кросс-браузерного способа сделать это вне webkit, потому что только webkit в настоящее время имеет background-clip: text , а это расширение background-clip не соответствует стандартам трек (насколько я знаю). Если вы хотите ослабить требование CSS3, вы можете выполнить тот же эффект кросс-браузер с помощью Canvas (или SVG), но тогда вы говорите только о браузерах с поддержкой HTML5.

Answer 2

На данный момент нет «чистого» CSS-способа, но есть способ с использованием CSS и некоторого дублирования контента. См. мое серверное текстовое решение для градиента CSS здесь , для которого не требуется JavaScript или простой фон. Вы также можете сделать это на стороне клиента, используя JavaScript, посмотрите, что сделал Dragonlabs здесь .

Answer 3

Лучшим решением на данный момент является использование сплошного цвета в качестве запасного варианта без webkit, а затем использовать следующую технику (требуется webkit):

h1 {
  color: $333;
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>Example</h1>

Answer 4

Как я уже указывал в качестве комментария в ответе zzzzBov, есть способ достичь градиента текста только в CSS3.

Если вы берете решение PNG чуть дальше, вы можете проделать тот же трюк с градиентами css3.

Конечно, это работает только для текста с одинаковым цветом фона.