Кто хоть раз сталкивался с версткой сайта, знает, что связка html+css не так уж проста как кажется на первый взгляд.
Я понимаю, что у каждого верстальщика есть свои секреты решения тех или иных проблем. Но раз уж основной целью этого блога стала попытка вернуть веб-мастеров в лоно стандартов, время от времени я буду публиковать свои «секреты» и решения.
Иногда дизайнерская мысль уходит слишком далеко относительно возможностей реализации, а макет уже принят заказчиком. И надо каким-то образом верстать.
Но как быть когда все или почти все заголовки прорисованы каким-нибудь экзотическим шрифтом?
Все не так страшно, как может показаться на первый взгляд и решение есть.
Решение элементарно. Надо делать заголовки картинками. 
Итак, в html добавляем:
А в css добавляем:
.h1div {
background-image: url(../images/htmllogo.gif);
width: 406px;
height: 70px;
display: block;
}
.h1div h1 {
display: none;
}
Не правда ли элементарно?
До смены дизайна на этом блоге заголовок был реализован именно таким образом.
Этот метод универсален, его можно применять к любым заголовкам, он работает во всех браузерах и раскрепощает фантазию дизайнера. Пользуйтесь.
2leep.com
03 июня 2008 в 16:14
а не дофига лишней разметки?
03 июня 2008 в 17:43
нет… наоборот получается куда более экономично с точки зрения кода, нежели другие варианты решения данной проблемы
05 июня 2008 в 0:05
А разве вес страницы не увеличится? Пускай чуть чуть но увеличение будет.
06 июня 2008 в 12:58
На несколько символов… но это настолько незначительно, что можно просто не обращать внимание.
05 июля 2008 в 0:50
Давно о таком способе и его вариациях (то есть выделение тегами ключевиков, например strong, а в css ставить font-weight: normal).
Не рискнул — имхо, очень-очень близко от клоакинга. Так-то можно увидать, а вот в способностях распознавания поискового бота сомневаюсь. Правда в его способностях читать CSS стили тоже сомневаюсь, но береженого бог бережет
А если графика отключена в браузере, то явный клоакинг — человек не видит, поисковик видит.
По-моему по другому надо делать, что-то вроде: h1 выводить обычным способом и тут же его перекрывать картинкой с большим z-index (да еще alt прописать) используя, видимо, абсолютное позиционирование.
05 июля 2008 в 0:51
В первой строчке слово «думал» забыл
25 сентября 2008 в 16:08
26 ноября 2008 в 4:36
Автор, молодец, конечно ничего нового отсюда не узнал, но идее + ))
VolCh, это лишний div добавлять… так не делаю из за того, что просто писать лень многа букафф)) предложенный автором способ полу4ше будет
17 декабря 2008 в 15:40
Приятно почитать
17 декабря 2009 в 23:08
Привет! На этом секреты «капут»? Или Мы переехали?
18 декабря 2009 в 0:14
gratitude, вам сюда: http://www.htmlblog.ru/category/html-css
03 марта 2010 в 8:16
Вес страницы увеличиться — если у тебя графики будет много, а тут так- капля в море. Не хватает только картинки — некоторым может быть сложно воспринимать код без визуализации, а копировать просто лень))
03 мая 2010 в 22:43
А смысл? Почему нельзя просто картинку разместить, безо всяких H1-заголовков?
04 мая 2010 в 10:08
Дело в том, что поисковые боты пока не научились распознавать текст на картинках. Вот и приходиться выеживаться. Пример в посте уже не актуален, т.к. выдумывался почти 2 года назад для темы котрая стояла на блоге в то момент.