Текст с градиентной заливкой при помощи css

Как сделать текст с градиентной заливкой при помощи CSS.
Все достаточно просто. Мы накладываем картинку PNG в 1 пиксель шириной (с переходом в прозрачность) на текст.

HTML код:

1

<h1><span></span>CSS Gradient Text</h1>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12

h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

Работает это следующим образом: заголовку необходимо указать position: relative, при этом если для тега , помещенного внутри него определить position: absolute , то ему можно будет задать координаты относительно тега

1

<h1>

Фикс для IE6

Поскольку IE6 не поддерживает прозрачность в PNG файлах, придется воспользоваться следующим кодом (необходимо поместить между тегами )

1
2
3
4
5
6
7
8

<!--[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->

Особенности

- Данный эффект сработает, если текст имеет однородный фон. В PNG файле должен использоваться только цвет фона текста.

- Для работы в IE6 необходимо использовать указанный выше хак

- Эффект сработает корректно, только если текст расположен в одну строку (если строк несколько, то сработает только для первой строки)

- поскольку слой перекрывает текст, текст становится некликабельным – в нем не должно быть ссылок и его нельзя выделить пример