dle.in.ua » Вебмастеру » Градиентный текст с помощью CSS

Градиентный текст с помощью CSS

Автор: alexben от 19-08-2008, 16:13
Градиентный текст с помощью CSS

Хотите создать красивый текст с градиентом без Photoshop? В этом уроке мы объясним, как создать градиентный текст с помощью PNG-картинки (только CSS, никакого Javascript или Flash). Все, что нужно — это тег span в заголовке и фоновая картинка с абсолютным позиционированием. Это работает в большинстве браузеров: Firefox, Safari, Opera, и даже Internet Explorer 6.
Как это работает?
Все просто. Мы просто добавляем градиент PNG (полупрозрачный), шириной в 1 пиксель поверх текста.
Градиентный текст с помощью CSS

Как это выглядит в 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;
}

Ну вот и все! Получился градиентный текст.
Вот тут: 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]-->

Вот как это выглядит:
Градиентный текст с помощью CSS


Примечания:
1. Работает только на фонах с заданным цветом. Цвет градиента (PNG-картинки) должен быть такой-же, как и у фона.
2. IE PNG hack нужен для работы в IE 6.
3. Если картинка градиента выше, чем текст, невозможно будет выделить текст в браузере.
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Прикольненько!) Спасибо alexben
    • Digg3R
    • Регистрация: --
    • Репутация: (||)
    • 19 августа 2008 17:26
    • 1
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Digg3R,
    пользуйся!...оч класная весч...мну лично понравилось,обязательно где нибудь применю
    • alexben
    • Регистрация: --
    • Репутация: (||)
    • 19 августа 2008 20:39
    • 2
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • http://senorra.net/css/20-gradientnyjj-tekst-s-pomoshhju-css.html

    Статья скопирована с Сенорранета.
    • innerson
    • Регистрация: --
    • Репутация: (||)
    • 22 августа 2008 03:09
    • 3
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Великое СПС!
    • Timka
    • Регистрация: --
    • Репутация: (||)
    • 24 августа 2008 20:25
    • 4
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • картинки не открываются((
    • ID-N
    • Регистрация: --
    • Репутация: (||)
    • 20 мая 2009 19:15
    • 5
    ^
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.