Стили CSS — Прячем Текстовый Заголовок Страницы за Изображением

Автор: Крис Койер
Перевод: Всеволод Козлов

Как Вы, наверное, прекрасно знаете, заголовки являются одними из важнейших элементов веб-страниц для поисковых систем. Обычно веб-мастера помещают основной заголовок сайта между тегами <h1>. Однако, такой заголовок далеко не всегда будет красиво смотреться.

В таких случаях, веб-мастерам выгоднее заменить его красивым графическим заголовком, жертвуя текстовым гораздо более эффективным аналогом.

Я же хочу предложить Вам решение, способное совместить текстовый и графический заголовки!


Все, что Вам нужно, это присвоить соответствующий CSS стиль элементу заголовка H1:

<h1 class="headerReplacement">Текстовый заголовок страницы</h1>

Сам же CSS стиль выглядит следующим образом:

.headerReplacement {
text-indent: -9999px;
width: 600px;
height: 100px;
background: url(Путь к Вашему графическому заголовку) #cccccc no-repeat; }

Оргинал статьи: Header Text Image Replacement

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*