Имитация символа с помощью CSS-свойств

↑

▷ Содержание

⇐ ПредыдущаяСтр 54 из 56Следующая ⇒

Разберём вариант с нижней границей border-bottom для символа Р.

Имитация символа рубля с помощью CSS-свойства border-bottom

Решение не масштабируемое: при увеличении размера букв линия заметно тоньше чем сама буква, дополнительно, смещается положение линии так, что она уже не выглядит как часть символа.

CSS-свойство перечёркнутого текста text-decoration: line-through также даёт не лучший результат.

Имитация символа с помощью CSS-свойства text-decoration: line-through

Результат этого способа в некоторых браузерах ужасен (MSIE). Существующие на данный момент средства CSS не дают нам возможности свободно управлять положением горизонтальной линии.

Дополнительная теория~ 4 минуты

Глава 8.16. Буквицы и красная строка

Буквицы

Буквица — первая буква абзаца, выделяется в исключительно декоративных целях. Не рекомендуется начинать с буквицы каждый абзац: это дурной тон. Не для каждого дизайна концепция буквицы подходит. Нельзя сказать, будто буквица — это что-то из ряда вон для веба, но и не на каждом сайте встречается. Мы нашли немало вариантов в сети, но в основном это не слишком интересные буквицы: они просто увеличенного кегля.

Базовая линия буквицы обычно находится ниже (иногда — существенно) базовой линии первой строки текста. Тогда ей обычно приписывают float и отступы.

Антипаттерны

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

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

Сделали буквицы в начале каждого абзаца

Кроме того, псевдоэлемент::first-letter может примениться к тем объектам, которые вы не учли: изображениям, встроенным перед текстом, или к другим строчным объектам, или к контенту, внедрённому с помощью псевдоэлемента::before.

Другой подход — заворачивать в <span> с классом те буквы, которые будут крупнее. Или делать буквицы только у лидов.

Буквица сделана только для лида

Или можно использовать в селекторах «фильтрующие» псевдоклассы, например,:first-of-type.

Буквица сделана только для первого абзаца с помощью псевдокласса:first-of-type

Красная строка

Красная строка задаётся свойством text-indent, значения могут быть положительные или отрицательные, абсолютные и относительные. Лучше всего выглядит при выравнивании текста по ширине.

Материал выровняли по ширине, у первой строки обратный отступ

Красная строка, как и буквица, — это очень специфический для веба элемент дизайна. Применяется редко, подразумевается как претензия на оригинальность, не применяется вместе с другими декоративными элементами.

Для стилизации первой строки можно использовать псевдоэлемент::first-line:

Выделена первая строка каждого абзаца

К сожалению, стилизация псевдоэлемента::first-line ограничена: можно менять только параметры шрифта, фона и цвет теста.

Дополнительная теория~ 10 минут

Познавательные статьи:



Организация работы процедурного кабинета

Статус республик в составе РФ

Понятие финансов, их функции и особенности

Сущность демографической политии