Градиентный текст с помощью CSS (без флэш и javascript)
Ну что? Уже успели оценить ссылочки в виде текста с градиентом?:) Еще нет? Видимо, вы читаете данную статью через ридер. Если так, то предлагаю сначала ознакомиться с примером.
Как видите, текст ссылки на демо тоже украшен градиентом. И самое важно, из того что уже было сказано - это “текст“. Так что закрываем фотошоп, если вы его уже запустили - ничего рисовать не будем. Знание flash и JavaScript тоже не понадобится.
Потребуется только пустой тэг <span> и фоновая картинка (в нашем случае - прозрачный png).
Что нам это дает:
- Чистый код и использование ТОЛЬКО CSS. Повторюсь - никаких JavaScript или flash
- Красивое оформление заголовков СТАНДАРТНЫМИ шрифтами. Никаких рисунков (не забываем про семантическую верстку и seo-оптимизацию), никаких работ в фотошопе или других графических редакторах. Один раз прописали стиль и забыли.
Начали:
<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");
}
3 ноября 2009 в 2:25
а ведь довольно неплохо выходит, если с градиентом текст делать.
Спасибо за урок.. буду пробовать в CSS разбираться..;)
[Ответить]
15 декабря 2009 в 6:59
а у еть!!! СПС!!
[Ответить]