Заголовки
11 Aug, 2004Заголовки, какие бы они ни были, всегда бросаются в глаза первыми.
www.cameronmoll.com
Эти заголовки просто поразили меня. Скажу честно, я очень удивился когда выделил текст в них. На первый взгляд, да и на второй это была картинка, но никак не текст! Просто поразительно какое гармоничое слияние нашел дизайнер своего красивого шрифта и обычного текста (курсива). Когда я начал разбираться, вот какой маленький трюк применил Камерон Молл. Для заголовков он использует такую конструкцию:<h1><img class="capA" src="/img/letters/a.gif" alt="" width="50" height="28" /><span class="hide">A</span>LA does it again</h1>
То есть в заголовке перед первой буквой идет картинка (они хранятся для каждой буквы). А потом идет сам текст, причем первую букву он заключил в <span>, что бы она не отображалась. А для каждой буквы-картинки выбрал идеальный правый отрицательный отступ (все разные!).
Вот как это выглядит:
...
.capI {margin-right: -13px; vertical-align: -20%;}
.capL {margin-right: -5px; vertical-align: -20%;}
.capM {margin-right: -16px; vertical-align: -20%;}
.capN {margin-right: -22px; vertical-align: -20%;}
.capO {margin-right: -3px; vertical-align: -20%;}
.capP {margin-right: -14px; vertical-align: -20%;}
.capS {margin-right: -7px; vertical-align: -40%;}
.capT {margin-right: -20px; vertical-align: -20%;}
.capU {margin-right: -9px; vertical-align: -25%;}
...
И из-за этого выглядит это все потрясающе. Заголовки смотрятся цельными словами, и курсив Georgia (именно этот шрифт используется для текста) гармонично сливается с красивым шрифтом дизайнера.
Вы можете подумать что наличие картинки портит вид при чтении без стилей.
Я тоже так подумал. Оказалось совсем нет. Эти буквы настолько красивы (я про первые буквы заголовков), что я даже не обратил на них внимания. Они совсем не мешают читать и не нарушают гармонию странички. Если вам лень загружать всю страницу вот те самые заголовки с сайта CaneronMoll.com:
комментариев к “Заголовки”