X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-11-05
  • 6296 переглядів

  • Дизайн та розробка сайту

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

В этом уроке хочу показать как с помощью 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;
}

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

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

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 2, в среднем: 5 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078