Уроки верстки – 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 интернет магазин косметики доставка по Украине.
Предлагаем брендинг для вашей компании или бизнеса.
Для девушек – косметика mary kay – будь красивой.

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!
А еще можно опубликовать ссылку на статью в своем блоге:
Опубликовать в twitter.com        
Похожие по тематике посты:

Комментариев - 7 для поста Уроки верстки – CSS подмена текста картинкой
  1. ]]> Бронников ]]> (June 13, 2009)

    Не последуют ли санкции того же Яндекса за использование такого метода на сайте ?
    Поскольку Ваш блог о CSS, то не могли бы Вы написать пост о том, как делать счетчики прозрачными ? Это довольно интересная и актуальная тема. Информация есть на этот счет, но слишком краткая. В любом случае спасибо!

  2. ]]> Tod ]]> (June 13, 2009)

    Бронников, Яндекс в этом плане – абсолютно непредсказуемая вещь, если что-то и последует негативное, то будет полностью на его совести. В целом, думаю, ничего это повлечет и все будет нормально.
    Про счетчики нужно подумать, я когда-то такое делал, но уже плохо помню. Постараюсь написать пост по этой теме.

  3. ]]> Javelines ]]> (June 16, 2009)

    /* Прозрачность 60%, т.е. мы видим только 40% цвета */
    .banner a img {
    filter:alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4; }
    /* При наведении, прозрачность уходит и баннер становится видимым */
    .banner a:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0; }

  4. ]]> Sam ]]> (August 23, 2009)

    there is no need to worry about search bots…. I’d suggest having this kind of html code:
    /*
    [img src=”anyimg.jpg” alt=”any information” /]
    */
    …in this case we can put “Название логотипа или компании” in alt attribute.

  5. ]]> shaMan ]]> (September 23, 2009)

    А как на эти подмены будет реагировать Яндекс?

  6. ]]> RodgerFox ]]> (April 16, 2010)

    Как и все нововедения)) Яша реагирует непредсказуемо xD

  7. ]]> Дмитрий ]]> (April 9, 2011)

    Я использую немного другой способ с применением CSS.
    Заголовок блока
    И в стилях прописываю:
    H1{
    text-indent:-9999px;
    width:250px;
    height:50px;
    background:url(../img/kartinka.png) no-repeat 0 0;
    }

    Данный способ прекрасно работает.

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