Буквица при помощи CSS

Уже много говорили о том, как сделать буквицу средствами CSS и... я не стану, наверное исключением.

Понятие буквицы известно нам из печатного дизайна, но, в последнее время, оно все чаще встречается в web-типографике. В данной заметки будут рассмотрены две техники, применяя которые, можно добиться соответствующего эффекта.

Итак, имеем следующий HTML-код:

<p><span class="dropCap">Е</span>сли бы строители строили здания так же, как программисты пишут программы, то первый залетевший дятел разрушил бы цивилизацию. Квалифицированный специалист — это человек, который удачно избегает маленьких ошибок, неуклонно двигаясь к какому-либо глобальному заблуждению.</p>

Буквица из обыкновенного текста

Обычный текст можно превратить в буквицу при помощи всего нескольких строк CSS-кода. А если использовать набирающий популярность стандарт внедрения шрифтов @font-face, то все становится еще проще.

А вот и CSS-код:

.dropCap {
float: left;
font-size: 5em;
line-height: 0.9em;
padding: 0 5px 0 0;
font-family: Georgia, "Times New Roman", Times, serif;
}

Демо.

Буквица из изображения

Тут, в принципе, тоже все просто: будет использовать изображение буквы в качестве буквицы при помощи свойств background и text-indent.

CSS-код:

.dropCap {
text-indent: -99999px;
background: url(drop_cap_e.gif) no-repeat left 5px;
height: 50px; width: 55px;
float: left;
display: block;
}

Демо.

Если вы собираетесь использовать множественные буквицы, то можно взяглянуть в сторону CSS-спрайтов.

jQuery-буквица

А еще для создания буквицы можно использовать jQuery. Для этих целей существует замечательный плагин, придуманный Карлом Свидбергом (Karl Swedberg), который называется Fancy Letter. Демо.