Заголовки

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:
Заголовок с сайта Камерон Молла
Заголовок с сайта Камерон Молла
Заголовок с сайта Камерон Молла
* * *Вобщем я думал описать побольше заголовков, но эта тема оказалась намного интересней, чем я предполагал. Я обязательно посвящу еще несколько постов ей. И надеюсь как-то обобщить всю информацию.

комментариев к “Заголовки”