Заголовки

11 August, 2004

XHTML/CSS, Дизайн

Заголовки, какие бы они ни были, всегда бросаются в глаза первыми.

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:

Заголовок с сайта Камерон Молла
Заголовок с сайта Камерон Молла
Заголовок с сайта Камерон Молла

* * *Вобщем я думал описать побольше заголовков, но эта тема оказалась намного интересней, чем я предполагал. Я обязательно посвящу еще несколько постов ей. И надеюсь как-то обобщить всю информацию.

XHTML/CSS, Дизайн

Оставить комментарий