Главная
Web-дизайн Wordpress
Как сделать буквицу с помощью CSS

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

Буквица

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

В этом уроке хочу показать как с помощью 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
(1 голос, в среднем: 5 из 5)

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий