Начальные заглавные буквы CSS

Как создать необычные начальные заглавные буквы с использованием CSS и изображений

Узнайте, как использовать CSS для создания необычных начальных заглавных букв для ваших абзацев. Существует даже простая методика замены изображения для использования графического изображения для начального ограничения.

Основные стили начальных заглавных букв

Существует три основных стиля начальных заглавных букв в документах:

  • Поднятый – наиболее распространенный вариант, где первая буква больше и находится в той же строке, что и текущий текст.
  • Dropped – также довольно часто встречается, когда первая буква больше и опускается ниже первой строки текста. Следующий текст затем плавает вокруг него.
  • Смежный – где первая буква находится в одном столбце рядом с остальным текстом. Это чаще встречается в печати, чем в веб-дизайне.

Начальные заглавные буквы или заглавные буквы очень знакомы. Это отличный способ нарядить длинные и скучные участки текста. А с помощью свойства CSS: first-letter вы можете легко определить, как сделать ваши первые буквы более привлекательными.

Создать простой начальный колпачок

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

 p: first-letter {font-size: 3em; } 

Но многие браузеры видят, что первая буква больше, чем остальная часть текста в строке, поэтому они делают начальный символ равным тому, что имело бы смысл для этой первой буквы, а не остальной части строки. К счастью, это легко исправить с помощью псевдоэлемента первой строки и свойства line-height:

 p: first-letter {font-size: 3em; } 
p: первая строка {line-height: 1em; }

Поиграйте с высотой строки в вашем документе, пока не найдете правильный размер для вашего текста.

Играть с вашей начальной крышкой

Как только вы поймете, как создать начальную шапку, вы можете одеть ее в модную одежду, чтобы она выделялась. Поиграйте с цветами, цветами фона, рамками или чем угодно, что вам нравится. Довольно простой стиль – поменять цвета шрифта и фона только на первую букву:

 p: буква {
размера шрифта: 300%;
цвет фона: # 000;
цвет: #fff;
}
p : первая строка {высота строки: 100%; }

Еще один трюк – центрировать первую линию. С CSS это может быть сложно, так как середина текстовой строки может отличаться, если ваш макет гибкий. Но если вы немного поиграете со значениями, вы можете сделать отступ в первой строке достаточно, чтобы первая буква оказалась посередине. Просто поиграйте с процентами в текстовом отступе абзаца, пока он не будет выглядеть правильно:

 p: буква {
размера шрифта: 300%;
цвет фона: # 000;
цвет: #fff;
}
p : первая строка {высота строки: 100%; }
p {текстовый отступ: 45%; }

Смежные начальные заглавные буквы трудны с CSS

Смежные начальные заглавные буквы могут быть трудны с CSS, потому что разные браузеры по-разному отображают шрифты. Идея создания смежного колпачка в CSS состоит в том, чтобы использовать свойство text-indent в первой строке, чтобы вытолкнуть его (влево) с отрицательным значением. Вам также необходимо изменить левое поле этого абзаца на некоторое количество. Играйте с этими числами, пока абзац не будет выглядеть хорошо.

 p {
текстовый отступ: -2.5em;
поле слева: 3em;
}
p: первая буква {font-size: 3em; }
p: первая строка {line-height: 100%; }

Получение действительно модных начальных заглавных букв

Лучший способ создать необычный начальный колпачок – это изменить шрифт на более декоративное семейство. Если вы используете серию шрифтов, за которыми следует универсальный шрифт, это поможет гарантировать, что ваш начальный предел будет хорошо отображаться, чтобы ваши клиенты могли его видеть, не вдаваясь в проблемы доступности и удобства использования.

 p: первая буква {
размер шрифта: 3em;
семейство шрифтов: «Edwardian Script ITC», «Brush Script MT», скоропись;
}
p: первая строка {line-height: 100%; }

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

Использование графического начального колпачка

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

  • Клиенты без изображений не увидят начальный колпачок и могут не увидеть скрытый текст, который заменяет изображение. Это может сделать абзац недоступным или, в лучшем случае, трудным для чтения.
  • Изображения всегда добавляют к времени загрузки страницы. Если у вас много начальных заглавных букв, вы можете значительно увеличить время загрузки того, что многие считают незначительным.
  • Некоторые браузеры отображают как скрытую первую букву, так и изображение, что может сделать текст абзаца странным.
  • Автоматизировать эту опцию очень сложно, так как вы должны точно знать, что такое первая буква, чтобы использовать правильную графику. Таким образом, каждый раз, когда абзац редактируется, вам может понадобиться создать новый рисунок.

Во-первых, вам нужно создать изображение первой буквы. Мы использовали Photoshop для создания буквы L со шрифтом «Edwardian Script ITC». Мы сделали его огромным – размером 300pt. Затем мы обрезали изображение до минимума вокруг буквы и отметили ширину и высоту изображения.

Затем мы создали класс “capL” для нашего абзаца. Здесь мы определяем, какое изображение использовать, ведущее (высоту строки) и так далее.

Вам нужно использовать ширину и высоту изображения, чтобы установить отступ текста и отступ отступа. Для нашего L-изображения нам потребовался отступ в 95 пикселей и отступ в 72 пикселя.

 p.capL {
line-height: 1em;
background-image: url (capL.gif);
background-repeat: no-repeat;
text- отступ: 95px;
отступ: 72px;
}

Но это не все. Если вы оставите его там, то первая буква будет дублирована в абзаце, сначала с графикой, а затем с текстом. Таким образом, мы добавили span вокруг этого первого элемента с классом «initial» и сказали браузеру не отображать эту букву:

 span.initial {display: none; } 

тогда изображение отображается правильно. Вы можете поиграть с текстовым отступом в абзаце, чтобы текст прилегал прямо к букве, однако вы бы хотели, чтобы он отображался.

ау.

Оцените статью
Solutics.ru
Добавить комментарий