В этом уроке рассказывается о том, как при помощи CSS создать текст с фоновым градиентом.
Итак, приступим...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):
h1 {
font: bold 330%/100%;
font-size: 30px;
position: relative;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 30px;
}
Для создания открывающих и закрывающих кавычек нам понадобятся 1 рисунок - градиент.
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
<html>
<head>
<link href="style.css" rel="stylesheet" type=text/css>
</head>
<body>
<h1><span></span>ГРАДИЕНТНЫЙ ТЕКСТ</h1>
</body>
</html>
4) Сохраняем и смотрим, что получилось.
Пояснения к коду:
width: 100%; - Задание ширины поля
position: absolute;
position: relative; - задание положение градиентного блока и текста.
В этом методе создания градиентного текста есть ряд недостатков. Главным по моему мнению является тот - что это не работает в IE6. Поправим:
Добавьте между тегами head такой код:
<!--[if lt IE 6]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.p
ng', sizingMethod='scale');
}
</style>
<![endif]-->
Вторым недостатком является то, что этот метод сильно завистит от цвета фона и текста. Это придётся каждый раз учитывать при создании.
ДемоИдея: Web Designer Wall
По материалам сайта:
Российская школа CSS
