как несложно сделать градиент у текста при помощи CSS
Добавляем пустой тег <span> в заголовок:
<h1><span></span>CSS Gradient Text</h1>
В файл стилей .css добавляем:
h1 { font: bold 330%/100% "Lucida Grande"; color: #464646; /* тут соль */ position: relative; } h1 span { /* указываем изображение с градиентом */ background: url(gradient.png) repeat-x; /*позиционируем абсолютно */ position: absolute; /*отображаем блоком на всю ширину заголовка */ display: block; width: 100%; height: 31px; }
надо еще повоевать с IE6, для этого в HTML код вставляем следующее:
<!--[if lt IE 7]> <style> h1 span { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale'); } </style> <![endif]-->
Данный документ является переводом статьи «Web Style Sheets CSS tips & tricks».
Оригинальная версия документа существует только на сайте W3C
Источник: loco.ru