Вы здесь: Главная > CSS > Буквицы: drop caps

Буквицы: drop caps

Опубликовано автором Просмотры: 15

Чтобы вызвать заглавные буквы с красной строки (знаете, те штуки с большими буквами, с которых начинается абзац), нужно увеличить размер первой буквы абзаца и переместить её влево. Легко.

Играем со стилями первой буквы, чтобы создать заглавную.

Шаг 1: HTML-код

Мы можем начать с чего-то вроде следующего HTML:

<p>Once upon a time in a blueberry bubblegum land...[Big load of text]...a lost sunfish from the Sweet Spaghetti River.</p>

Простой абзац без излишеств.

Шаг 2: Создание дроп-кэпа

Далее мы можем применить следующий CSS:

 

body {
    font: 15px/1.5 arial, helvetica, sans-serif;
}

p:first-letter {
    float: left;
    font-size: 45px;
    line-height: 1;
    font-weight: bold;
    margin-right: 9px;
}

Увеличиваем первую букву и перемещаем её влево.

И мы могли бы немного увеличить фантазию…

p:first-letter {
    float: left;
    font-size: 45px;
    line-height: 1;
    font-weight: bold;
    margin-right: 9px;
    color: #9c0;
    font-family: "Times New Roman", Times, serif;
    text-shadow: #690 .05em .05em;
}

В качестве альтернативы, если бы мы чувствовали себя немного сумасшедшими, мы могли бы заменить функциональный текст изображением:

p:first-letter {
    float: left;
    font-size: .1px;
    padding: 50px 0 0 40px;
    background: url(/examples/images/o.gif);
    margin-right: 9px;
}

Нацелен только на первый абзац

До сих пор мы делали всё очень просто. Однако, если вы собираетесь использовать drop caps, скорее всего, вам захочется настроить таргетинг на первую букву только первого абзаца. Как бы то ни было, приведённые выше примеры будут нацелены на каждый абзац.

Вы могли бы сделать это, применив класс или идентификатор к выбранному p элементу, но более привлекательный способ сделать это ─ использовать псевдокласс :first-of-type. Это может быть использовано для таргетинга на первый экземпляр абзаца, а затем на первую букву этого абзаца:

body {
    font: 15px/1.5 arial, helvetica, sans-serif;
}

p:first-of-type:first-letter {
    float: left;
    font-size: 45px;
    line-height: 1;
    font-weight: bold;
    margin-right: 9px;
}

Если вы поддерживаете старые браузеры (а именно Internet Explorer 8 и ниже), вам не повезло с :first-of-type. Safer :first-child действительно сработал бы в предыдущем примере, но если бы перед абзацем было что-нибудь, например заголовок, это не сработало бы (потому что это нацелено на первого дочернего элемента независимо от типа).

Страницы в тему:

Примеры CSS:

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