Можно ли установить градиент на цвет текста?

Question

Firefox 3.6 позволяет установить градиент на фоне .

Возможно ли установить градиент и на цвет текста?

Например :

HTML:

<span>Hello</span>

CSS:

body {
    background: -moz-linear-gradient(left, red, white);
}
span {
    font-size: 13em;
    color: #222;
}

Я бы хотел "заменить" #222 на -moz-linear-gradient(left, white, blue);, например.*

Есть ли способ сделать это?

Answer 1

Если вам нужно это только для небольшого объема текста (например, заголовка), вы сможете добиться эффекта в Safari / Chrome, используя -webkit-background-clip: text и -webkit-gradient.(Firefox пока не поддерживает это.)

Эта демонстрация не использует градиенты, но должна объяснять background-clip: text

Answer 2

h1 { position: relative; font-size: 70pt; margin-top: 0; }</p> <pre><code>h1 a { text-decoration: none; color: #ffcc33; /* or rgb/a */ position: absolute; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1))); } //css to enter the content on page after render - optional h1:after { content : 'Hello World'; color: #d6d6d6; text-shadow: 0 1px 0 white; }