Рецепты CSS

Замена заголовков картинкой

Если на вашей html странице есть несколько заголовков (h1-h6) и вы хотели бы их заменить картинкой, тогда используйте CSS, который легко с этим справляется.

Для начала нужно изготовить саму картинку, например, такую:

Все заголовки и текст окружаем блоком с идентификатором "con", примерно так:

<div id="con">
здесь заголовки и текст
</div> 

Всем заголовкам задаем идентификатор:

<h2 id="zarplata"><span>&nbsp;</span>Зарплата</h2>
<h2 id="jurnalist"><span>&nbsp;</span>Журналист</h2>
<h2 id="p-odessa"><span>&nbsp;</span>Поезд на Одессу</h2>
<h2 id="karpaty"><span>&nbsp;</span>Карпаты</h2>
<h2 id="adulter"><span>&nbsp;</span>Адюльтер</h2>

И вставляем в CSS файл вот такой код:

div#con h2 {
position:relative;
width:250px; /* указывем ширину картинки */
height:42px; /* указывем высоту шрифта на картинке */
font:bold small-caps 70% Arial,sans-serif;
color:#847FB7;
margin:0 0 2px;
}
div#con h2 span {
position:absolute;
width:100%;
height:100%;
background-image:url(images/paint.png); /* указывем адрес картинки */
}
h2#zarplata span {
background-position:0 -10px; /* указывем отступ от края картинки */
}
h2#jurnalist span {
background-position:0 -52px;
}
h2#p-odessa span {
background-position:0 -92px;
}
h2#karpaty span {
background-position:0 -138px;
}
h2#adulter span {
background-position:0 -180px;
}

Посмотреть на конечный результат