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

Главная

Статьи

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

21.12.2011 00:00

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

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

Демонстрация

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

Шаг 1. HTML

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

<!DOCTYPE html>

<html lang="ru" >

 <head>

 <meta charset="utf-8" />

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

 <link href='http://fonts.googleapis.com/css?family=Ruslan+Display&amp;subset=latin,cyrillic' rel='stylesheet' type='text/css'>

 <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">

 </head>

 <body>

 <header>

 <a href="http://www.webmasters.by/articles/html-coding/937-css3-drop-caps.html" class="stuts" target="_parent">Вернуться к <span>статье</span></a>

 </header>

 <div class="container">

 <h2 style="text-align:center;">Сказка о Ваське-Муське</h2>

<div>В некотором царстве, некотором государстве, а именно в том, в котором мы живем, жил-был досюль помещик. У помещика был кот, звали его Васька-Муська.

Помещик любил Ваську-Муську, и кот свою кошачью работу работал хорошо — в хлебных лабазах ловил крыс и мышей. Когда хозяин прогуливался, Васька-Муська мог нести во рту до фунта весом гостинец из лавки домой, и крепко любил его за это помещик — двадцать лет держал кота Ваську-Муську.</div>

<div>Наконец Васька-Муська стал старый, усы у него выпали, глаза у него стали худые, сила стала у него мала, не может крыс ловить и мышей давить. Надоел помещику Васька-Муська, схватил его помещик за загривок, выбросил на задворок и пнул ногой.</div>

..................

 </body>

</html>

Обратите внимание, что шрифт мы подключаем при помощи Google Web Fonts API

Шаг 2. CSS

Здесь представлены все необходимые стили CSS для достижения этого эффекта:
CSS/layout.css

body {

 background-color:#eee;

 color:#000;

 font:14px/1.3 Arial,sans-serif;

}

header {

 background-color:#212121;

 box-shadow: 0 -1px 2px #111111;

 display:block;

 height:70px;

 position:relative;

 width:100%;

 z-index:100;

}

header h2{

 font-size:22px;

 font-weight:normal;

 left:50%;

 margin-left:-400px;

 padding:22px 0;

 position:absolute;

 width:540px;

}

header .stuts span {

 font-size:22px;

 font-weight:bold;

 margin-left:5px;

}

.container {

 border: 1px dotted #000000;

 margin: 0 auto;

 overflow: hidden;

 padding: 20px;

 position: relative;

 text-align: justify;

 width: 75%;

}

@font-face {

 font-family: 'Ruslan Display', cursive;

}

.container div, .container h2 {

 color: #000000;

 font-family: 'Ruslan Display', cursive;

 font-size: 18px;

 line-height: 32px;

 text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);

}

.container div:first-letter {

 float: left;

 font-size: 80px;

 line-height: 1;

 margin: 15px 5px 0 0;

 text-transform: uppercase;

}

Первая половина стилей - это макет страницы, им можете не уделять внимание. Последние три правила являются наиболее важными. Мы подключили специальный шрифт ('Ruslan Display') при помощи @font-face. Первая буква каждой строки выбирается при помощи селектора :first-letter. Для каждой первой буквы каждой строки мы задали большой размер (80px), верхний регистр, а также float:left и отступы, чтобы буква не сливалась с основным текстом.

Ну вот и всё! Как вы смогли убедиться, здесь нет ничего сложного. Удачи!

Скачать исходники

Перевод