Градиентный текст с помощью CSS
Cуть: накладываем на текст нужный градиент или текстуру, точно также как и в любом графическом редакторе.
Градиент должен быть прозрачной png картинкой.
Плюсы этого способа
- Минимум графики
- Кросс-браузерность
- SEO(Это ТЕКСТ, а не графика, так что его будут учитывать ПС)
- Опциональнасть (Текст можно легко конфигурировать — менять шрифт, цвет, да что угодно…)
Реализация способа
Пишими текст, к примеру заголовок (h1). Вставляем в него блок с нашим будущим градиентом (<span></span>).
<h1><span></span>Привет, Я градиентный текст</h1>
Теперь оформляем текст и самое главное блок.
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;
}
К сожалению Internet Explorer ниже седьмого, не признает прозрачность png, исправим это добавив следующий код между тегами <head></head>.
<!--[if lt IE 7]>
<style>
h1 span { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->
К примеру Вас запарило вставлять блок с градиентом (span) в текст, это можно легко исправить с помощью 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>
Теперь можно посмотреть пример или скачать его в архиве.
Источник: webdesignerwall.com
