Заголовки и другие элементы картинками понедельник
17 марта

Иногда есть необходимость вставить какой-либо небольшой текст с помощью картинок.

Хочу рассказать об удобном и универсальном способе это делать. На помощь придет псевдоэлемент :before

Допустим нам надо вставить заголовок h2 рисунком:

Как видно, заголовок нарисован нестандартным шрифтом и расположен на неоднородном фоне. Поэтому картинку со сплошным фоном вставить нельзя, надо использовать gif-картинку с прозрачным фоном. Один из лучших способов это сделать:

<h2><img src="h2_news.gif" alt="Новости" /></h2>

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

<h2>Новости</h2>

А картинку вставим с помощью css. Создадим стили заголовка, максимально похожие на нарисованное:

h2{
	font: 1.2em georgia,serif;
	color: #00416b;
	margin: 0 0 1.5em 0;
}

Следующий шаг — вытесним текстовый заголовок картинкой в псевдоэлементе :before

h2:before{
	content: url(h2_news.gif);
	display: block;
	line-height: 1em;
}

В результате имеем двойной заголовок. Чтобы избавиться от заголовка выполненного текстом укажем у заголовка высоту нашей картинки и применим свойство overflow: hidden;

h2{
	font: 1.2em georgia,serif;
	color: #00416b;
	margin: 0 0 1.5em 0;
	height: 14px;
	overflow: hidden;
}

Готово!

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

Если у пользователя отключены картинки, то картинка в элемент :before не грузится, но пользователи видят заголовок, выполненный с помощью правил css. Единственный недостаток в этом случае — при увеличении размера шрифта текст заголовка начинает обрезаться, поэтому могу рекомендовать указывать размер шрифта поменьше.

Еще один момент. IE. Для него создаем псевдоэлемент с помощью js (увы, по-другому никак):

h2{
	zoom: expression(
	runtimeStyle.zoom = 1,
	insertAdjacentHTML('afterBegin','<span style="display: block;line-height: 1em;"><img src="h2_news.gif" alt="" /></span>')
	);
}

При отсутствии js пользователи IE увидят тоже, что и пользователи других браузеров при отключенных картинках. Т.е. все ок.

В заключение весь css сразу:

h2{
	font: 1.2em georgia,serif;
	color: #00416b;
	margin: 0 0 1.5em 0;
	height: 14px;
	overflow: hidden;
}
h2:before{
	content: url(h2_news.gif);
	display: block;
	line-height: 1em;
}
h2{
	zoom: expression(
	runtimeStyle.zoom = 1,
	insertAdjacentHTML('afterBegin','<span style="display: block;line-height: 1em;"><img src="h2_news.gif" alt="" /></span>')
	);
}

Пример