Вы наверняка встречали в интернете красивые заголовки построенные с использованием подложки  полупрозрачного изображения-градиента в формате PNG.
Ярким примером тому является учение описаное на сайте http://cssglobe.com/lab/textgradient/

Однако это можно сделать без использования изображения-градиента, на чистом CSS.

Вы наверняка встречали в интернете красивые заголовки построенные с использованием подложки  полупрозрачного изображения-градиента в формате PNG.
Ярким примером тому является учение описаное на сайте http://cssglobe.com/lab/textgradient/

Чистый CSS

Рассмотрим очень интересный пример использования чистого CSS с помощью которого реализуется некая имитация градиентного заголовка, но только лишь с использованием технологии CSS. Обращаем внимание на то что код HTML совершенно не меняется, меняется всего лишь оформление стилей. Выглядит это следующим образом.

h1 {
  font: 32px Georgia, \"Times New Roman\";
  position: relative; /* обязательно */
  color: #0094D6;
  margin: 10px 0;
  padding: 0;
}
h1 b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 23px;
  background: #FFF;
  overflow: hidden /* для проклятого IE6 */;
  opacity: 0.63;
  filter: alpha(opacity=63);
  -moz-opacity: 0.63;
}
/* Решение для IE6 нужно вынести в файл ie6.css как обычно */
*html h1 {height:0;}
*html h1 b {height: expression(this.parentNode.clientHeight * 0.6);}

Что мы сделали. Мы залили тег белым цветом и придали ему прозрачности (последние 3 правила для кроссбраузерности), при этом разместив его поверх заголовка так, чтобы закрыть текст примерно наполовину.

В виду того, что как и обычно, IE6 “вставяет палки в колеса лубого Веб-дизайнера”, пришлось использовать:

• во-первых, из-за него пришлось дописывать дополнительное правило overflow: hidden, иначе полупрозрачный слой закрывает текст полностью,
• во-вторых, IE6 не понимает процентной высоты для слоя , также закрывая текст полностью, поэтому пришлось задавать его высоту в пикселях.

Пример использования

Пример заголовка №1

Пример заголовка №2

Пример заголовка №3

Итог

В итоге у нас получились очень даже красивые заголовки.
Обращаем внимаение вот на что — в h1 b { …background: #FFF; … }  используется цвет основного фона страницы.

Источник http://www.bestwebbuzz.com/?p=188 — Английская версия.