Это простенький CSS трюк, покажет Вам как можно добавить эффект градиента при помощи PNG картинки (никакого Flash’a и JavaScript’a, только CSS). Всё что Вам потребуется – это добавить пустой тэг <span> в ваши заголовки (имеется ввиду <h1>,<h2> и т.д.) и указать фоновое изображение. Этот способ работает практически во всех браузерах. Начнем с HTML – добавляем пустой тэг <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]-->
Кстати, если Вы не хотите править горы HTML кода, за Вас это может
сделать jQuery:
<script
type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//prepend span tag to H1
$("h1").prepend("<span></span>");
});
</script>
И всё, множество примеров можете найти на это странице. Сам пример можете скачать по данной ссылке (в архиве вы найдете все градиенты, готовые к применению).
Источник: http://anton.shevchuk.name/html-and-css/css-gradient/ | 
