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

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

Итак, нет png. Только "webkit".

EDIT: Точнее: это только CSS3, а для текста, а не градиенты окна.

EDIT: Я нашел это решение, но это только для webkit.

Ответ 1

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

Лучшим решением на данный момент является использование сплошного цвета в качестве резервной копии без 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>