Доброго времени суток, гики сайтостроения. В сегодняшней публикации будет рассмотрена тема, касающаяся оформления текстового контента. Именно поэтому вы узнаете, как задаются заглавные буквы css — средствами, ознакомитесь с несколькими вариантами создания буквицы и конечно же сможете все опробовать на практике. Ну а теперь давайте переходить к самому интересному!
Займемся трансформацией текста
Благодаря каскадным стилевым таблицам можно изменять как первый символ блока, так и весь текст. Я расскажу вам, как можно сделать оба варианта. При этом все названные в данной статье инструменты поддерживаются в трех уровнях языка: css1, css2, css2.1 и css3.
Начну с интересного свойства, которое видоизменяет весь текстовый контент в выбранном блоке. Это text-transform.
Названный элемент может преобразовывать символы к прописным, строчным, а также задавать каждый первый символ слова в виде заглавной буквы. Подробнее о значениях я написал в таблице.
| Ключевое слово | Предназначение |
| none | Указывает, что регистр изменяться не будет. |
| Capitalize | Изменяет первый символ каждого слова на заглавную букву, при этом остальные остаются неизменными. |
| Uppercase | Контент трансформируется в верхний регистр, т.е. все буквы становятся большими. |
| Lowercase | Контент трансформируется в нижний регистр, т.е. все символы становятся строчными. |
| inherit | Наследуются характеристики предка. |
Вот теперь для закрепления теоретического материала разберите пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Трансформация текста</title>
<style>
body {
text-align: center;
}
h1 {
text-transform: uppercase;
}
h3 {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>Внимание!</h1>
<h3>!Завтра на все косметические товары скидка!</h3>
<p>Акция действует во всех филиалах, расположенных в Вашем городе.</p>
</body>
</html> |
Создание буквицы
Если вы не знаете, что подразумевает под собой термин «буквица», то как раз настало время узнать, так как это напрямую связано с текущей темой.
Буквица (или еще иногда говорят инициал) – это первая буква главы, которая отличается от остальных своим крупным размером, цветом и в некоторых случаях даже дизайном шрифта. В жизни пример такой буквы можно встретить в старых рукописях и книгах.
Существует несколько способов создания инициала. Часто символ выделяют тегом языка разметки <span> и после в стилях прописывают определенные свойства, которые его видоизменяют. Это неплохой способ, однако данная публикация рассказывает про механизмы css (которые, по моему мнению, в данном случае использовать намного логичнее и удобнее).
Для решения поставленной задачи можно воспользоваться таким инструментом, как псевдоэлемент.
Так, в данном случае используется :first-letter. Как и все псевдоэлементы, он приписывается к селектору через двоеточие. После по всем правилам таблиц стилей указываются свойства. Однако применить можно только те свойства, которые относятся к редактированию шрифтов, отступов, цвета, заднего фона, полей и границ.
Предлагаю рассмотреть конкретный пример. Реализуя представленную небольшую программу, я решил сделать не просто цветную буквицу, а заполнить ее цветами. Для этого нужно использовать несколько хитрых приемов с установкой прозрачного цвета шрифта и заливкой буквы выбранным изображением.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Выступающий инициал</title>
<style>
p {
font-size: 26px;
font-family: fantasy;
}
P:first-letter { /*прописываю стилевые правила для первой буквы абзаца*/
font-family: sant-serif;
font-weight: 900;
color: transparent;
background: url(https://dreempics.com/img/picture/Mar/26/51a6ff79968c93a6542e88e464368bce/1.jpg);
background-size: 99%;
font-size: 119px;
-webkit-background-clip: text;
}
</style>
</head>
<body>
<p>В этом абзаце написано предложение с очень интересным содержанием.</p>
<p>Продолжим интересный рассказ и в следующем абзаце.</p>
</body>
</html> |
Полученный результат выглядит очень привлекательно и необычно, что является идеальным решением для сайта.
Как видите данная тема очень простая. Приведенный мною программный код вы спокойно можете использовать для своих веб-ресурсов, модифицируя и подгоняя под свой стиль.
Если изложенный материал был вам полезен, то подписывайтесь на обновления моего блога и не забывайте делиться полученными знаниями (и конечно же ссылкой на мой блог) с друзьями. Желаю удачи!
Пока-пока!
С уважением, Роман Чуешов
