Уроки верстки – CSS подмена текста картинкой

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

Но меня слегка смутило отсутствие текстового заголовка, в частности с точки зрения поисковых систем. Да, я не использую h1 для заголовка блога на всех страницах, там у меня в этот тег попадают лишь тайтлы постов. Но на главной было бы неплохо его иметь, да и просто текст в шапке, который будет прочтен ПС первым, неплохо чтобы сообщал им название всего проекта. На 100% не уверен насчет привередливости и мнения поисковиков, но мне лично такое оформление кажется правильным.

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

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

Вариант подмены изображения номер 1 (самый простой)

<h1 class="technique-eight">
 <span></span>Заголовок проекта
</h1>

h1.technique-eight {
	width: 350px; height: 75px;
	/* Размеры нужного нам блока */
	position: relative;
	}
 
h1.technique-eight span {
		background: url("images/header-image.jpg");
		/* Наша картинка */
		position: absolute;
		width: 100%;
		height: 100%;
	}

Для литературного блога я использовал именно этот вариант. Спасибо за описание реализации автору данной статьи.

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

<h1><a href="#">Вау! Я логотип!<span></span></a></h1>

h1 a{
 width:250px;height:50px;
 overflow:hidden;
 display:block;
  position:relative;
}
 
h1 a span{
 position:absolute;
 width:250px;height:50px;
 top:0;
 left:0;
 background:transparent url(../img/kartinka.png) no-repeat 0 0;
}

HTML код остался практически таким же, а вот в CSS добавилось немного больше строк. В том числе и overflow:hidden.

Есть еще способ (вариант 3), которые прячет текст из поля видимости страницы на мониторе.

<h1 class="main-logo">Название логотипа или компании </h1>

h1.logo {
width: 300px; height: 50px;
background: url(images/logo.jpg);
text-indent: -9999px;
}

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

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

P.S. MakeUp интернет магазин косметики доставка по Украине.
Возможно вам пригодятся powerpoint backgrounds – скачать можно у нас.
Предлагаем брендинг для вашей компании или бизнеса.
Для девушек – косметика mary kay – будь красивой.