Автор: Крис Койер
Перевод: Всеволод Козлов
Как Вы, наверное, прекрасно знаете, заголовки являются одними из важнейших элементов веб-страниц для поисковых систем. Обычно веб-мастера помещают основной заголовок сайта между тегами <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
Смотрите также:
- Скрипт галереи
- Jquery скрипты
- Prestashop шаблоны
- Создание логотипа
- Текстуры
- Jquery всплывающие подсказки
- Иконка корзины
- Css конструктор
- Blockquote css
- Сделать сайт
4 комментария(-ев)
глупость какая…
[...] (Реализация тут) Тэги: css В категории «webdev»
[...] (Реализация тут) (Еще не оценили)Тэги: css В категории «webdev»
Тогда заголовок не будет виден при отключенных изображениях в браузере. Можно добавить в H1 несемантический элемент SPAN:
<h1><span></span>Текстовый заголовок страницы</h1>
CSS:
H1 {
width: 600px;
height: 100px;
position: relative;
}
H1 SPAN {
background: url(Путь к Вашему графическому заголовку) no-repeat;
position: absolute;
width: 600px;
height: 100px;
}
Минус: картинка должна быть с непрозрачным фоном.