Врезанная в текст буквица

Опубликовано автором

Drop cap (врезанная в текст буквица) – это первая буква абзаца, имеющая больший размер чем остальные, и размещенная так, что её верх находится на уровне первой строки абзаца. На изображении вы можете увидеть пример врезанной в текст буквицы.

cap
Кстати, у WordPress есть специальный плагин (wordpress.org/extend/plugins/drop-caps), который позволяет автоматически создавать врезанные в текст (и смещенные вниз) заглавные буквы. Замечательно! Однако, что если вы не хотите использовать плагин (я уверен, что не хотите), и вам всего лишь необходимо создать drop cap к нескольким постам, и, возможно, в каком-нибудь определенном месте?

Хорошая новость: для того чтобы создать заглавные буквы не нужно применять плагин, все что необходимо это немного css и тег span. Откройте свой css-файл и добавьте следующий код:

CSS

span.dropcaps {
    font-family:Georgia, serif;
    color: #ccc;
    font-size: 46px;
    float: left;
    font-weight: 400;
    line-height: 1em;
    margin-bottom: -0.4em;
    margin-right: 0.09em;
    position: relative;
}

Как-то так. Конечно, вам понадобится стиль, который бы подходил к вашему дизайну и тексту. Например, значения свойств: font-size, margins и line-height будет необходимо подобрать исходя из вашего дизайна и текста.

Тег Span

Для того чтобы стиль применялся к заглавной букве текста, необходимо «завернуть» заглавную букву в тег span и прописать соответствующий класс.

HTML

<span class="dropcaps">A</span>

Псевдоэлемент :first-letter

Также задать стиль первому символу в тексте можно с помощью псевдоэлемента :first-letter. Однако к псевдоэлементу :first-letter можно применять ограниченное количество свойств: это свойства связанные со шрифтом, цветом, фоном, границами, полями и отступами. Еще следует отметить, что псевдоэлемент :first-letterне будет работать в старых браузерах.

CSS

p:first-letter {
    font-family:Georgia, serif;
    color: #ccc;
    font-size: 46px;
    float: left;
    font-weight: 400;
    line-height: 1em;
    margin-bottom: -0.4em;
    margin-right: 0.09em;
    position: relative;
}

Вот пара методов редактирования заглавных букв с помощью CSS.

Можно добавить и с помощью картинки, но это уже другая тема.

источник

Просмотры: 262