Градиентный текст с помощью CSS (без флэш и javascript)

Ну что? Уже успели оценить ссылочки в виде текста с градиентом?:) Еще нет? Видимо, вы читаете данную статью через ридер. Если так, то предлагаю сначала ознакомиться с примером.

Как видите, текст ссылки на демо тоже украшен градиентом. И самое важно, из того что уже было сказано - это “текст“. Так что закрываем фотошоп, если вы его уже запустили - ничего рисовать не будем. Знание flash и JavaScript тоже не понадобится.

Потребуется только пустой тэг <span> и фоновая картинка (в нашем случае - прозрачный png).

Что нам это дает:

• Чистый код и использование ТОЛЬКО CSS. Повторюсь - никаких JavaScript или flash
• Красивое оформление заголовков СТАНДАРТНЫМИ шрифтами. Никаких рисунков (не забываем про семантическую верстку и seo-оптимизацию), никаких работ в фотошопе или других графических редакторах. Один раз прописали стиль и забыли.

Демо | Скачать

Зачем нам это может понадобиться? Прежде всего для выделения заголовков и концентрации на нем внимания посетителей. Допустим одна из страниц вашего сайта посвящена вакансиям в Черкесске и вы хотите обратить внимание на какой-то конкретный блок. Для SEO будет желательно, чтобы названия блока было заключено в тэги h1 или h2. Для посетителей же нужно этот заголовок как-то выделялся на странице. А с повальной модой на Web 2.0 отличным вариантом будет градиентный текст, тем более что он так и останется текстом, а не картинкой.

Начали:


<h2>Градиентный текст с помощью CSS
<strong><span></span></strong></h2>


Стили для H2 определяем в CSS. Не обязательно брать один-в-один из данного примера, можете придумать что-то свое. Обязательно: position должно быть установлено relative;!


h2 {
font-size:220%;
color:#0079b6;
font-weight:normal;
letter-spacing:-.05em;
margin:.6em 0;
position:relative;
}


Теперь сам градиент.


h2 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url(gradient_1.png) repeat-x;
}


Проблему отображения png-24 в InternteExplorer 6 мы с вами уже решали, так что выбираете тот способ, который больше нравится. А пока пишем:


* html h2 span {
background-color:#fff;
back\ground-color:transparent;
background-image: url(none.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="gradient_1.png", sizingMethod="scale");
}


Спасибо за добавление статьи в: