Сегодня я собираюсь рассказать вам о том, как создать красивую буквицу при помощи CSS3. Я уверен, что вы часто видели эти большие буквы в книгах детских сказок. Особенно в старых книгах.
Admin
Для реализации эффекта буквицы некоторые вебмастера выделяют первую букву в отдельный элемент DOM и применяют специальные стили для этого элемента. Но теперь это не является необходимым, так как можно использовать CSS3. Мы будем использовать псевдоэлемент :first-letter, чтобы выбрать нужный нам первый символ. Давайте взглянем на пример, который мы будем реализовывать.
Ок, пример мы посмотрели, а теперь посмотрим как это сделать
Вот 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>
Со стилями тоже не будем усложнять. Первую букву стилизуем при помощи псевдоэлемента :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;
}
Для усиления эффекта можно подключить экзотический шрифт "под старину" или покреативить с фонами. Оставляем это на ваше усмотрение.
© 2008 - 2024 Webmasters.BY Все права защищены
Новый комментарий