Хотите создать красивый текст с градиентом без Photoshop? В этом уроке мы объясним, как создать градиентный текст с помощью PNG-картинки (только CSS, никакого Javascript или Flash). Все, что нужно — это тег span в заголовке и фоновая картинка с абсолютным позиционированием. Это работает в большинстве браузеров: Firefox, Safari, Opera, и даже Internet Explorer 6.
Как это работает?
Все просто. Мы просто добавляем градиент PNG (полупрозрачный), шириной в 1 пиксель поверх текста.
Как это выглядит в HTML:
А что насчет CSS?
Ну вот и все! Получился градиентный текст.
Вот тут: DEMO
IE, мы тебя любим
Поскольку IE6 не поддерживает PNG-24, нужно установить следующий хак (вставьте в head):
Вот как это выглядит:
Примечания:
1. Работает только на фонах с заданным цветом. Цвет градиента (PNG-картинки) должен быть такой-же, как и у фона.
2. IE PNG hack нужен для работы в IE 6.
3. Если картинка градиента выше, чем текст, невозможно будет выделить текст в браузере.
Все просто. Мы просто добавляем градиент PNG (полупрозрачный), шириной в 1 пиксель поверх текста.
Как это выглядит в HTML:
<h1><span></span>CSS Gradient Text</h1>
А что насчет CSS?
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;
}
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;
}
Ну вот и все! Получился градиентный текст.
Вот тут: DEMO
IE, мы тебя любим
Поскольку IE6 не поддерживает PNG-24, нужно установить следующий хак (вставьте в head):
<!--[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->
Вот как это выглядит:
Примечания:
1. Работает только на фонах с заданным цветом. Цвет градиента (PNG-картинки) должен быть такой-же, как и у фона.
2. IE PNG hack нужен для работы в IE 6.
3. Если картинка градиента выше, чем текст, невозможно будет выделить текст в браузере.