Классические типографские эффекты с использованием CSS: первая строка вступления
23 апреля 2016 | Опубликовано в css | 1 Комментарий »
Одна из типографских традиций — выделять первую строку или первые несколько слов первого абзаца, т. е., вступления; обычно буквы в словах преобразовываются в малые заглавные или капитель с помощью CSS. Например, можно использовать следующий код CSS, подобный нужному для создания буквицы:
p:first-of-type:first-line { font-variant: small-caps; }
Посмотреть пример применения псевдоэлемента первой строки можно ниже:
Не у всех шрифтов есть вариант с малыми заглавными буквами, и в таком случае браузер изобразит замену. Есть шрифты, состоящие только из малых заглавных букв, например, Trajan Pro. В случае, если Вы используете шрифт формата OpenType, можно применить другой вариант реализации малых заглавных букв.
Обратите внимание, что эффект пвседоэлемента первой строки динамический: если количество слов меняется при масштабировании или изменении размера окна браузера, то заданные правила применяются только к тексту, который остается в первой строке абзаца.
Задать свойства только для пары первых слов несколько сложнее. К сожалению, пока что нет псевдоэлементов, которыми можно было выделить первое слово, второе слово, последнее слово или слово с определенным порядковым номером в предложении. Единственным решением в такой ситуации будет использование тега <span> для оборачивания слов, которым нужно задать свойство в коде CSS. HTML код для такой ситуации может выглядеть следующим образом:
<p>P<span>hilip, after the defeat</span> of Onomarchus, had marched toward the pass of Thermopylae, which, however, he found occupied by the Athenians, who had sent a force for the purpose of preventing his advance. Being baffled there,he directed his march into Thrace, and alarmed the Athenians for the safety of their dominions in the Chersonese.</p>
И нужный код CSS:
p:first-of-type span { font-variant: small-caps; }
Тег <span> используется, только когда не остается других вариантов. Это строчный тег, который не несет дополнительного смысла, кроме того, что в этом месте есть содержимое. Поэтому нужно стараться найти другие пути.
Автор урока Dudley Storey
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191