Имитация градиентных заголовков на чистом 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
26 ноября 2008 г. в 15:41
milax, верно заметили. Отличилась только Опера, в которой текст выделяется, независимо от наличия этого слоя.
Sonikelf
26 ноября 2008 г. в 17:45
milax, Dimox, имхо, это не так страшно.
milax
26 ноября 2008 г. в 17:51
Sonikelf, а я и не говорил, что это страшно, я писал о том, что это неудобно.

P.S. Ссылку на свой блог оставлять не буду, Dimox все-равно сотрет ;)
Евгений
27 ноября 2008 г. в 10:45
Здорово! Очень неплохое решение
Vladimir
27 ноября 2008 г. в 11:07
А для FireFox я вообще ничего не встречал

FireFox поддерживает text-shadow, правда, только с версии 3.1
Vladimir
27 ноября 2008 г. в 11:09
Dimox, это глюк или нет? В низу прошлого комментария такая надпись: «[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.»
Dimox
27 ноября 2008 г. в 12:54
FireFox поддерживает text-shadow, правда, только с версии 3.1

Спасибо, будем знать.

Dimox, это глюк или нет?

Это плагин для отлова спама. Надпись говорит о том, что у тебя отключен JavaScript.
Vladimir
27 ноября 2008 г. в 13:07
Включен у меня JavaScript. FireFox/3.04 Linux 64-bit.

А AdBlock банит только баннеры флэшовые, стороннюю рекламу и парочку гифов.
Dimox
27 ноября 2008 г. в 13:16
Значит глючный этот плагин. Отключил его нафиг.
Андрей
7 декабря 2008 г. в 00:05
Прикольно. Займусь этим на днях..
Главное чтобы во всех браузерах работало..
Олег
8 декабря 2008 г. в 22:00
Это круто!

Два вопроса:

1. Как сделать так, чтобы не 2 цвета было, а скажем 5? Просто я вообще не бумбум в этом.

2. Что нельзя сделать через CSS? :) Просто я помню, Гомера Симпсона в CSS шрифтами нарисованного…
Dimox
8 декабря 2008 г. в 23:04
1. Как сделать так, чтобы не 2 цвета было, а скажем 5? Просто я вообще не бумбум в этом.

Не представляю, как это должно выглядеть. Добавлять нужно по аналогии с вложенным элементом . Зачем в заголовке делать 5 цветов?

2. Что нельзя сделать через CSS? :) Просто я помню, Гомера Симпсона в CSS шрифтами нарисованного…

Не понял вопроса.
Семен
12 декабря 2008 г. в 04:01
Все работает! Красота!
Спасибо большое, это украсит мой блог.
tillfy
15 декабря 2008 г. в 12:52
Очень симпатично выгладит. Спасибо, будем юзать!
TanuSHka
15 декабря 2008 г. в 15:45
Хоть и простенько, но зато красивенько :)

А это только для IE 6? Просто пыталась сделать, в Опере как был обычный текст, так и остался. Если вдруг прочитаете данный комментарий, то прошу о помощи :) Хотела бы в блоге поменять заголовок, как в примерах 3-я строка (серые цвета).

Заранее спасибо!
Alex
17 декабря 2008 г. в 17:44
Действительно, результат смотрится достаточно приятно. Однако использовать больше двух цветов, думаю не стоит, иначе будет визуальная каша.

iCat

29 января 2009 г. в 04:47

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

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

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.

Егор
22 марта 2009 г. в 11:23
Жаль, что только однострочные заголовки поддерживаются
Влад
5 февраля 2010 г. в 12:20
У меня такой трабл, все сделал, переделал ничего не помогает. Заливает тупо всю строку от начала сайта до конца вместе с нужным текстом!!
Vincent
13 июля 2010 г. в 18:15
респект! спасибо, как раз то что нужно

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

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

Примеры

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

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

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

Смотрите также

Зеленый свет CSS-свойствам при верстке под IE8 и выше

Эмуляция псевдо-селектора :nth-child() в IE7 и IE8

CSS-трюк: IE, таблица и "резиновые" изображения

10 фиксов, решающих проблемы Internet Explorer 6

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

Ваш комментарий