Как сделать буквицу с помощью CSS

Віталий

10 років ago

Доброго времени суток. 🙂

В этом уроке хочу показать как с помощью CSS сделать такой элемент текста, как Буквица. Такой вид оформления раньше можно было встретить в книгах. Его отличительная черта заключается в том, что первая буква в абзаце, намного больше остальных и явно выделяется своим стилем. Сейчас же, иногда, авторы сайтов тоже используют у себя такой эффект.

Раньше можно было сделать буквицу только с вставкой изображения, на котором была нарисована буква, в нужном виде. Теперь все это возможно, просто используя 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;
}

Как видите, нет ничего сложного в том, чтобы создать буквицу внутри Ваших записей на сайте.

На этом все, спасибо за внимание. 🙂

Exit mobile version