Узнайте, как использовать CSS создаватьизысканный начальные заглавные буквы для ваших абзацев. Существует даже простая техника замены изображения, позволяющая использовать графическое изображение для начальной шапки.
Основные стили начальных заглавных букв
В документах существует три основных стиля начальных заглавных букв:
- Поднятый - самый распространенный, где первая буква крупнее и находится на той же строке, что и текущий текст.
- Упавший - также довольно часто, когда первая буква больше и опускается ниже первой строки текста. Затем вокруг него появляется следующий текст.
- Соседний - где первая буква находится в одном столбце рядом с остальным текстом. Это чаще встречается в печати, чем в веб-дизайне.
Заглавные буквы или буквицы очень знакомы. Это отличный способ украсить длинные и скучные фрагменты текста. А с помощью свойства CSS: first-letter вы можете легко определить, как сделать ваши первые буквы более интересными.
Создайте простой начальный предел
Все, что вам нужно сделать, чтобы создать простую приподнятую начальную шапку, - это увеличить размер первой буквы абзаца с помощью псевдоэлемента первой буквы:
p: первая буква {размер шрифта: 3em; }
Но многие браузеры убедитесь, что первая буква больше, чем остальной текст в строке, поэтому они делают интерлиньяж равным тому, что имеет смысл для этой первой буквы, а не для остальной части строки. К счастью, это легко исправить с помощью псевдоэлемента первой строки и свойства line-height:
p: первая буква {размер шрифта: 3em; }
р: первая строка {высота строки: 1em; }
Поиграйте с высотой строки в документе, пока не найдете нужный размер для текста.
Играйте с начальным пределом
Как только вы поймете, как создать начальную кепку, вы сможете надеть на нее модную одежду, чтобы она выделялась. Поиграйте с цветами, цветами фона, границами или чем угодно, что вам нравится. Достаточно простой стиль - поменять местами цвета шрифта и фона только для первой буквы:
p: first-letter {
размер шрифта: 300%;
цвет фона: # 000;
цвет: #fff;
}
р: первая строка {высота строки: 100%; }
Еще одна хитрость - центрировать первую линию. Это может быть сложно с CSS, поскольку середина текстовой строки может быть другой, если ваш макет гибкий. Но немного поиграв со значениями, вы можете сделать отступ в своей первой строке, чтобы первая буква оказалась посередине. Просто поиграйте с процентным соотношением отступа текста абзаца, пока он не станет правильным:
p: first-letter {
размер шрифта: 300%;
цвет фона: # 000;
цвет: #fff;
}
р: первая строка {высота строки: 100%; }
п {текст-отступ: 45%; }
Смежные начальные заглавные буквы сложны с CSS
Смежные начальные заглавные буквы могут быть затруднены с помощью CSS, поскольку разные браузеры по-разному отображают шрифты. Идея создания смежной шапки в CSS заключается в использовании свойства text-indent в первой строке, чтобы вытолкнуть ее (влево) на отрицательное значение. Вам также нужно будет немного изменить левое поле этого абзаца. Поиграйте с этими числами, пока абзац не будет выглядеть хорошо.
п {
отступ текста: -2,5em;
маржа слева: 3em;
}
p: первая буква {размер шрифта: 3em; }
р: первая строка {высота строки: 100%; }
Получение действительно причудливых начальных шапок
Лучший способ создать причудливую начальную шапку - это изменить шрифт на более декоративное семейство шрифтов. Если вы используете серия шрифтов за которым следует общий шрифт, это поможет гарантировать, что ваше начальное ограничение будет хорошо отображаться, чтобы ваши клиенты могли его увидеть, не вдаваясь в проблемы с доступностью и удобством использования.
p: first-letter {
размер шрифта: 3em;
семейство шрифтов: «Edwardian Script ITC», «Brush Script MT», курсив;
}
р: первая строка {высота строки: 100%; }
И, как обычно, вы можете объединить все эти предложения, чтобы создать начальное ограничение, соответствующее стилю рекламы вашему абзацу.
Использование графической начальной шапки
Если после всего этого вам все еще не нравится, как ваши начальные заглавные буквы выглядят на странице, вы можете прибегнуть к графике, чтобы получить точный эффект, который вы ищете. Но прежде чем вы решите сразу перейти к графике, вы должны знать о недостатках этого метода:
- Клиенты без изображений не увидят начальную шапку и могут не увидеть скрытый текст, который заменяет изображение. Это может сделать абзац недоступным или, в лучшем случае, трудным для чтения.
- Изображения всегда увеличивают время загрузки страницы. Если у вас много начальных ограничений, вы можете значительно увеличить время загрузки для того, что многие люди сочтут несущественным.
- Некоторые браузеры отображают скрытую первую букву и изображение, что может сделать текст абзаца нечетким.
- Этот параметр очень сложно автоматизировать, так как вы должны точно знать, что такое первая буква, чтобы использовать правильную графику. Итак, каждый раз, когда абзац редактируется, вам может потребоваться создать новую графику.
Во-первых, вам нужно создать изображение первой буквы. Мы использовали Photoshop, чтобы создать букву L шрифтом «Edwardian Script ITC». Мы сделали его огромным - размером 300pt. Затем мы обрезали изображение до минимума вокруг буквы и отметили ширину и высоту изображения.
Затем мы создали класс capL для нашего абзаца. Здесь мы определяем, какое изображение использовать, интерлиньяж (высота строки) и т. Д.
Вам нужно использовать ширину и высоту изображения, чтобы установить отступ текста и верхний отступ абзаца. Для нашего L-изображения нам нужен отступ 95 пикселей и отступ 72 пикселя.
p.capL {
высота строки: 1em;
фоновое изображение: URL (capL.gif);
фон-повтор: без повторения;
текстовый отступ: 95 пикселей;
padding-top: 72px;
}
Но это не все. Если оставить его там, то первая буква будет продублирована в абзаце сначала с графикой, а затем в тексте. Поэтому мы добавили диапазон вокруг этого первого элемента с классом initial и сказали браузеру не отображать эту букву:
span.initial {display: none; }
После этого графика отображается правильно. Вы можете поиграть с текстовым отступом в абзаце, чтобы текст прижался прямо к букве, как бы вы ни хотели, чтобы он отображался.