Метод замены текста картинкой. Image replacement

Метод замены текста картинкой. Image replacement

Статья рассчитана на тех, кто уже разбирается в HTML и CSS. Но, безусловно, для многих, кто не знает об этом методе, будет очень познавательной и интересной статьёй.

Если ты дизайнер, ты хочешь, что бы каждый твой дизайн был уникален и неповторим. Пытаешься нарисовать все так, что бы гармонировало, каждая деталь дополняла другую и так далее. Зачастую, нарисовав красивый заголовок для какого-либо раздела, выясняется, что заказчику надо, что бы поисковики “видели” эти категории, рубрики их названия. Как быть? Ведь если убрать это все, и поставить простой текст, то задумка дизайна уже не будет такой классной и уникальной! Получится классное оформление, а текст обычный, как говорит один мой знакомый блогер “буденно”(с укр. повседневно) т. е. зажжено, просто, неуникально. И вот я могу Вам представить решение. Метод называется Image replacement. Есть несколько разных способов его применения. Как работает метод Image replacement? В коде html, в том месте где вам надо вставить вашу картинку, мы ставим тег заголовка <h1></h1>- к примеру, и между ним вставляем текст Вашего будущего заголовка и в CSS прописываем нужные параметры( об этом ниже),ставишь для заголовка background:url(my_img. jpg); . Итак, когда ты заходишь на сайт, то ты видишь картинку, которую ты вставил в background, а текст нет, а поисковики как раз и видят тот текст, который будет заголовком первой важности между тегами

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

Дальше я приведу несколько способов как реализовать вышесказанное.

В вашем коде, на месте будущего заголовка ставим:

1 <h1>Текст Вашего заголовка</h1>

И вперед в Ваш CSS файл:

Без добавления HTML.

1. Phark Method h1{ text-indent: -7000px; overflow: hidden; height:70px; width:200px; background-image: url(”my_img. jpg”);

}

Используя этот метод, при отключении картинок не видно будет ничего.

2.Метод Leahy/Langridge

1 h1{

2 padding: 60px 0 0 0;

3 overflow: hidden;

4 background-image: url(”my_img. jpg”);

5 height: 0px! important;

6 height:60px;

7 }

Разумеется вместо высоты и отступа 60 ставьте свои размеры.

3. Malarkey Image Replacement

1 h1{

2 letter-spacing :-1000em;

3 height:70px;

4 width:200px;

5 background-image: url(”my_img. jpg”);

6 }

Отличные методы, но используя все 3 этих, при отключении картинки не покажут ничего =(

С добавлением HTML

1. Метод Pixy

В нашем HTML документе прописываем:

<h1>Заголовок - картинка<span></span></h1>

И опять топаем в наш CSS:

1 h1{

2 margin:0; padding:0;

3 position:relative;

4 width:200px; height:80px;

5 overflow:hidden;

6 }

7 h1 span {

8 display:block;

9 position:absolute; left:0; top:0; z-index:1;

10 width:200px;

11 height:70px;

12 background:url(”<code>my_img. jpg</code>”) top left no-repeat;

13 }

Наконец, если использовать этот метод, то при отключении картинок в браузере, вы будете лицезреть тот текст который напишите между тегами заголовка! =) Это радует. Этот метод наверно самый лучший(имхо), я использую его.


Карта сайта


Информационный сайт Webavtocat.ru