Web Design Club

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Web Design Club » CSS » Эффект градиента для текста с помощью CSS


Эффект градиента для текста с помощью CSS

Сообщений 1 страница 3 из 3

1

Частенько хочется сделать несложный заголовок с простеньким графическим эффектом. Но вот фотошопить каждый раз немного утомляет. Тем более - если хочется чтобы каждый заголовок был с этим самым эффектом (ясное дело, с разным текстом). Вот Вам простой CSS-трюк, как это сделать, используя рисунок в формате png (чистый CSS, никакого жаваскрипта и флеша). Всё что нужно - пустой тег <span> в заголовке, и заставить фоновое изображение перекрыть текст с помощью свойства position:absolute

Проверено на большинстве популярных браузеров: Firefox, Safari, Opera, даже под Internet Explorer 6 работает (с png-хаком). Посмотреть на это можно тут, скачать демо - тут.

Преимущества:

    - Это чистый CSS, никакого жаваскрипта или флеша, работает на большинстве браузеров (в т.ч. IE6, правда - с хаком)
    - Идеальная техника для дизайна заголовков. Не нужно каждый предварительно вырисовывать в фотошопе. Это сэкономит время и канал.
    - Использовать можно на любых web-шрифтах, размер шрифта останется изменяемым (Ctrl+, Ctrl-).

Как это работает?

Сама по себе реализация проста. Мы просто добавляем поверх текста однопиксельный png-градиент (с альфа-прозрачностью).

http://www.webdesignerwall.com/wp-content/uploads/2008/01/screen1.gif

html-разметка

<h1><span></span>CSS Gradient Text</h1>

Собственно, CSS

Основным пунктом в данном случае являются

h1 { position: relative }

и

h1 span { position: absolute }

А дальше:

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;
}

Заставим это работать в IE6

По причине неправильной обработки прозрачности png-24 в IE6, для правильного отображения нужен следующий хак (добавить где-нибудь между тегами <head></head>)

<!--[if lt IE 7]>

<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

Насчёт хаков для IE6 почитать -тут

jQuery-версия, для любителей семантики

Если Вам не хочется иметь в заголовках пустой <span> тег, можно использовать жаваскрипт чтобы его (тег) туда поместить. Например, с помощью метода prepend (jQuery):

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag to H1
  $("h1").prepend("<span></span>");

});
</script>


Ещё

Хотите глянцевый текст?

http://www.webdesignerwall.com/wp-content/uploads/2008/01/screen2.gif

В принципе, этот трюк применим на любом однотонном фоновом цвете (пока цвет Вашего градиента совпадает с цветом фона).

Ограничения и прочее

    - Этот трюк подходит только для элементов, которые находятся на однотонном фоне. Ваш градиент (рисунок png) должен быть того же цвета, что и фон.
    - Требуется хак для правильной обработки png в IE.
    - Если градиент выше Вашего текста, его (текст) невозможно будет выделить.

0

2

Avalon написал(а):

- Требуется хак для правильной обработки png в IE.

что за хак?

0

3

Никита написал(а):

что за хак?

<!--[if lt IE 7]>

    <style>
    h1 span {
      background: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
    }
    </style>

    <![endif]-->

0

Похожие темы


Вы здесь » Web Design Club » CSS » Эффект градиента для текста с помощью CSS