Имитация градиентных заголовков на чистом CSS

34 комментария

Если вы периодически монитерите РУнет на предмет наличия статей о различных CSS-ных штучках, то вам наверняка попадалась техника создания заголовка с помощью обычного текста и одного полупрозрачного изображения-градиента в формате PNG.

Вот пример, который я имею в виду. Если коротко, то работает это следующим образом. Имеется вот такой заголовок с отдельно вложенным контейнером:


<h1>Заголовок<b></b></h1>

Контейнер  позиционируется поверх текста и в его фон помещается полупрозрачный градиент, который закрывает текст наполовину.

Альтернатива

Сегодня я хочу рассказать об очень похожей технике, которая, однако, не предполагает использование изображений вообще. Т.е. реализуется некая имитация градиентного заголовка, но только лишь с использованием технологии CSS.

Исходный html-код абсолютно не менятся, т.е. будет использоваться тот же самый код, что указан чуть выше. А разница будет лишь в используемых CSS-правилах. Выглядят они следующим образом:


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

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

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

Примеры

Смотрим живые примеры (если в своей RSS-читалке вы наблюдаете просто заголовки, то перейдите на блог):

Это псевдо-градиентный заголовок

Еще один красивый заголовочек

Ну и последний за компанию

Согласитесь, красиво? Я считаю, ради красивости семантикой в данном случае можно и пожертвовать.

В общем, пробуем и при подходящем случае используем на своих сайтах =)

Источник описанной техники — Optimized Css Text Gradient.

P.S. Интересно отметить, что автор статьи-источника совсем не обратил внимания на то, что в IE6 его техника не работает. Это весьма удивительно (то, что не обратил внимания), учитывая тот факт, что англоязычных пользователей IE6 более 50%.

Комментарии (34)

Dimox
10 лет 10 месяцев назад
FireFox поддерживает text-shadow, правда, только с версии 3.1
Спасибо, будем знать.
Dimox, это глюк или нет?
Это плагин для отлова спама. Надпись говорит о том, что у тебя отключен JavaScript.
Vladimir
10 лет 10 месяцев назад
Включен у меня JavaScript. FireFox/3.04 Linux 64-bit.
А AdBlock банит только баннеры флэшовые, стороннюю рекламу и парочку гифов.
Dimox
10 лет 10 месяцев назад
Значит глючный этот плагин. Отключил его нафиг.
Андрей
10 лет 10 месяцев назад
Прикольно. Займусь этим на днях..
Главное чтобы во всех браузерах работало..
Олег
10 лет 10 месяцев назад
Это круто!
Два вопроса:
1. Как сделать так, чтобы не 2 цвета было, а скажем 5? Просто я вообще не бумбум в этом.
2. Что нельзя сделать через CSS? :) Просто я помню, Гомера Симпсона в CSS шрифтами нарисованного…
Dimox
10 лет 10 месяцев назад
1. Как сделать так, чтобы не 2 цвета было, а скажем 5? Просто я вообще не бумбум в этом.
Не представляю, как это должно выглядеть. Добавлять нужно по аналогии с вложенным элементом . Зачем в заголовке делать 5 цветов?
2. Что нельзя сделать через CSS? :) Просто я помню, Гомера Симпсона в CSS шрифтами нарисованного…
Не понял вопроса.
Семен
10 лет 10 месяцев назад
Все работает! Красота!
Спасибо большое, это украсит мой блог.
tillfy
10 лет 10 месяцев назад
Очень симпатично выгладит. Спасибо, будем юзать!
TanuSHka
10 лет 10 месяцев назад
Хоть и простенько, но зато красивенько :)
А это только для IE 6? Просто пыталась сделать, в Опере как был обычный текст, так и остался. Если вдруг прочитаете данный комментарий, то прошу о помощи :) Хотела бы в блоге поменять заголовок, как в примерах 3-я строка (серые цвета).
Заранее спасибо!
Alex
10 лет 10 месяцев назад
Действительно, результат смотрится достаточно приятно. Однако использовать больше двух цветов, думаю не стоит, иначе будет визуальная каша.

iCat

10 лет 8 месяцев назад

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

Решаемо при помощи:


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: 60%; /* Высота в процентах для всех браузеров */
  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);}

;)

Понятно, что это грабли, но это позволит изменять размер шрифта, задавая всего одно значение — для h1.

Егор
10 лет 6 месяцев назад
Жаль, что только однострочные заголовки поддерживаются
Влад
9 лет 8 месяцев назад
У меня такой трабл, все сделал, переделал ничего не помогает. Заливает тупо всю строку от начала сайта до конца вместе с нужным текстом!!
Vincent
9 лет 3 месяца назад
респект! спасибо, как раз то что нужно