Большинство дизайнеров творят и креативят ни на секунду не задумываясь о том, как порой веб-мастеру бывает трудно воплотить их идеи.

Однако, не надо расстраиваться преждевременно, если вы относитесь к таким веб-масетрам. С нашей помощью Вы сможете реализовывать самые нестандартные решения своего дизайнера средствами CSS.

В этой статье мы поговорим о тексте с градиентом.

Как установить градиент для текста?

Самый простой и примитивный способ получить в тексте эффект градиента — это старый добрый Adobe Photoshop. В этом программном пакете создаем текст, устанавливаем градиент и сохраняем картинкой. И затем в нужное место вставляем полученную картинку. Этот способ действенный, но значительно затрудняет внесение поправок, скажем семейства шрифта или цвета градиента.

Альтернативный метод основывается на хитростях использования свойств CSS. Для этого в нужный контейнер с текстом необходимо вставить тег span, который будет хранилищем для градиента. В качестве градиента будет служить пиксельная картинка, которой необходимо назначить альфа прозрачность с цветовым переходом. Теперь, чтобы эффект градиента сработал, накладываем контейнер с картинкой на текст по следующей схеме

Создание кода для текстового градиента является тоже не сложной операцией. Пример кода для градиента заголовка третьего уровня представлен ниже:

HTML

<h3><span></span>Градиент текста средствами CSS</h3>

CSS

h3 {
  font-family: Cuprum;
  font-size:20px;
  position: relative;
  color: #444;
}
h3 span {
  background: url(grad.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 20px;
}

А вот так текст будет выглядеть на вашем экране:

Некоторые могут начать придираться к пустому тегу span. Для таких умельцев существует два других способа, через которые можно присвоить для заголовка эффект градиентности.

Градиент с использованием JQuery

Первый из них вынуждает обратиться к JQuery. Принцип работы в этом случае не меняется, изменяется лишь способ вставки контейнера с фоновым изображением. Теперь мы можем не использовать span в HTML-коде, а записать его через скрипт, как показано в примере ниже

<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
  $("h1").prepend("<span></span>");
});
</script>

Градиент с использованием псевдокласса before

Второй способ реализует градиент цвета заголовка тоже без использования пустого блока span. На замену ему приходит псевдокласс before, его мы присваиваем тегу заголовка с аналогичными свойствами. Данная запись выигрывает с точки зрения семантики кода.

h1:before {
  content: "";
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

Стоит отметить, что легендарный браузер Internet Explower может конфликтовать с таким кодом, поэтому следует перед сдачей проекта хорошенько потестировать свою верстку в нем.

Важно понимать

1. Нашу хитрость следует использовать только в случае использования однотонного фона, причем картинка градиента должна по цвету совпадать с фоном.
2. Использование заголовка, который заполняет несколько строк, усложняет процесс градации цвета текста. Для отладки процесса необходимо будет растянуть градиентную картинку и подогнать ее репит.
3. Используя свою фантазию и навыки, можно создать текст не только с градиентом, но и с текстурами.