Верстка сайта

Создаем буквицу при помощи CSS3

Сегодня я собираюсь рассказать вам о том, как создать красивую буквицу при помощи CSS3. Я уверен, что вы часто видели эти большие буквы в книгах детских сказок. Особенно в старых книгах.

Создаем буквицу при помощи CSS3

Для реализации эффекта буквицы некоторые вебмастера выделяют первую букву в отдельный элемент DOM и применяют специальные стили для этого элемента. Но теперь это не является необходимым, так как можно использовать CSS3. Мы будем использовать псевдоэлемент :first-letter, чтобы выбрать нужный нам первый символ. Давайте взглянем на пример, который мы будем реализовывать.

Ок, пример мы посмотрели, а теперь посмотрим как это сделать

Шаг 1. HTML

Вот HTML-структура нашей страницы, тут нет ничего особенного:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Буквица</title>
  </head>
  <body>
    <p id="dropcaps">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
    anim id est laborum.</p>
  </body>
</html>

Шаг 2. CSS

Со стилями тоже не будем усложнять. Первую букву стилизуем при помощи псевдоэлемента :first-letter для имитации буквицы. Выделим ее жирным шрифтом, а обтекание текстом реализуем через свойство float. И не забудем про цвет. В нашем случае красный.

p#dropcaps:first-letter {
  color: #900;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  margin: 0.75rem 1rem 0 0;
  float: left;
}

Для усиления эффекта можно подключить экзотический шрифт "под старину" или покреативить с фонами. Оставляем это на ваше усмотрение.

Комментарии 0

Новый комментарий

Имя:
Для редактирования комментария осталось 10 минут
Комментарии отсутствуют