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