Раньше можно было сделать буквицу только с вставкой изображения, на котором была нарисована буква, в нужном виде. Теперь все это возможно, просто используя CSS. Поможет нам псевдоэлемент first-letter, который определяет первую букву. Выглядит это примерно так:
Давайте возьмем к примеру блок с классом content. Внутри него будет текст который разбит на абзацы тегами <p>. Укажем стили первой букве в абзаце и как писал раньше, присвоим псевдоэлемент first-letter. Готовый код получится примерно таким:
.content p:first-letter{
float: left;
color: #300;
font-size: 70px;
line-height: 55px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
Каждая первая буква в абзаце будет в виде буквицы. Стили для буквы, можете конечно же прописать свои, в зависимости от стиля сайта и Вашего желания.
Чтобы установить буквицу только в начале статьи, то есть всего одну букву и все, то нужно заключить в блок только один абзац.
Есть еще один фокус, чтобы была только одна буквица на странице. Но он почему-то не всегда работает и не везде. Например, у меня он работает только в WordPress. Чтобы каждый раз не заключать в теги текст записи, я использую почти тот же метод, но присваиваю сразу два псевдоэлемента - :first-letter и :first-child. В самой теме, в файле single.php, нужно найти строку с вызовом функции:
<?php the_content(); ?>
И как в первом примере заключить ее в блок присвоив класс. В WordPress, абзацы по умолчанию заключены в тег <p>, так что стили получатся вот такими:
.content p:first-letter:first-child{
float: left;
color: #300;
font-size: 70px;
line-height: 55px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
Как видите, нет ничего сложного в том, чтобы создать буквицу внутри Ваших записей на сайте.
На этом все, спасибо за внимание. 🙂
