Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Делаем заглавные буквы css стилями с использованием псевдоэлементов

Доброго времени суток, гики сайтостроения. В сегодняшней публикации будет рассмотрена тема, касающаяся оформления текстового контента. Именно поэтому вы узнаете, как задаются заглавные буквы 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(http://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>

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

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

Если изложенный материал был вам полезен, то подписывайтесь на обновления моего блога и не забывайте делиться полученными знаниями (и конечно же ссылкой на мой блог) с друзьями. Желаю удачи!

Пока-пока!

С уважением, Роман Чуешов


Прочитано: 104 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: