—»     —»   Эффект буквицы и абзаца при помощи CSS3
  Раздел: CSS/Style Sheets   Нет комментариев  

Эффект буквицы и абзаца при помощи CSS3

Веб-сайты стали нечто вроде посредниками в обмене информацией по всему миру. Более того, современные сайты также предлагают фотографии и видеоролики. Однако до сих пор доминантой остается текстовый контент, и большинство издателей этого придерживаются. Сюда можно отнести правила того, как вы структурируете абзацы и предложения, которые влияют на восприятие информации.

Эффект буквицы и абзаца при помощи CSS3

Сегодня мы хотим рассказать вам о том, как при помощи некоторых CSS-махинаций можно создавать красивые текстовые эффекты. Удобочитаемость и выбор шрифта напрямую связаны с общим дизайном сайта. Однако внедрение таких текстовых эффектов как например буквица, подсветка, визуально понятные ссылки, помогают вам сделать контент более удобным к чтению и восприятию. Чтобы понять, о чем мы сегодня будем говорить, вы можете посмотреть live-демо.

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.


Общие настройки страницы

Мы создали типичный документ с doctype HTML5 с зафиксированным по центру разделом для контента. Стиль оформления абзацев должен сочетаться с оформлением остальных элементов страницы, будь то блоки оповещения или фрагменты цитат. Стоит отметить, что вы можете довольно удобно предоставить контент, даже не используя вторичных заголовков в тексте.

Наши таблицы стилей довольно просты, - в них используется несколько CSS-сбросов и позиционирование. Каждый элемент параграфа оформлен при помощи em-единиц и дополнительных полей в нижней части. Вы также можете видеть, каким образом мы создали тэг H1 при помощи горизонтальных границ, расположенных ровно по центу.

/** typography **/
h1 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
letter-spacing: -0.05em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}

h2 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.1em;
line-height: 1.4em;
letter-spacing: normal;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}

p {
display: block;
font-size: 1.35em;
line-height: 1.5em;
margin-bottom: 22px;
}

Мы решили использовать шрифт Helvetica Neue в качестве основного шрифта по всей странице. Это альтернативный вариант шрифта Helvetica без засечек, однако вам не обязательно придерживаться каких-то строгих правил.

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

<div id="content">
<h1>Stylish CSS-Only Paragraph Effects</h1>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare vehicula felis adipiscing euismod. Mauris vestibulum vel odio tincidunt molestie. Suspendisse vestibulum, justo <span class="highlight">non tempor gravida</span>, lectus eros auctor metus, eu congue eros turpis eget nunc.</p>

<p class="pull">Vestibulum felis lacus, ornare et enim vitae, tincidunt fringilla odio.</p>

<p class="bigger">Nulla vel nisl ut risus malesuada volutpat ac id nunc. Vestibulum felis lacus, ornare et enim vitae, tincidunt fringilla odio. Maecenas varius felis in elit ornare, dignissim faucibus felis lobortis. </p>

<p>Vivamus et dolor massa. Suspendisse mattis vestibulum arcu, ullamcorper vestibulum sapien auctor ac. Nulla dignissim, nulla ut cursus ultricies, nisi libero rutrum nisl, et luctus sem nibh nec dolor. Maecenas <a href="#">pulvinar convallis</a> erat, a convallis neque aliquet vitae.</p>

<p>Proin in turpis non tellus ultricies porta. Vestibulum ac urna adipiscing, posuere tellus at, <span class="fancyamp">&</span> mollis tortor.</p>

<blockquote>Quisque dictum, mi convallis tempus viverra, leo dolor convallis turpis, tincidunt tincidunt nunc lorem sit amet quam. In augue sapien, gravida non eros at, accumsan fermentum est. Maecenas malesuada tempus orci, in pellentesque tellus sodales sit amet.</blockquote>

<p class="notice"><strong>Notice:</strong> Quisque vestibulum blandit magna, non varius lectus consequat et. Sed elementum dui elit, sit amet venenatis massa faucibus tempus.</p>

<p><span class="dropcap-alt">N</span>ulla tristique aliquet sem, sed accumsan tellus. Phasellus dictum velit et quam pulvinar commodo. Vestibulum gravida ipsum malesuada nisl varius, ac <a href="#">feugiat sapien volutpat</a>. Fusce a nibh ac dui sagittis elementum. Vestibulum augue risus, semper a sollicitudin sit amet, consequat vel sapien. Nunc commodo elit eu turpis lobortis sollicitudin.</p>

<p class="first bigger">In sollicitudin felis ac massa suscipit accumsan. Praesent tempus justo viverra eleifend congue. Praesent blandit sollicitudin orci, sed tincidunt arcu adipiscing vitae.</p>
</div><!-- @end #content -->

Буквица абзаца

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

p.first:first-letter, .dropcap {
float: left;
font-size: 4.8em;
padding: 2px;
font-family: Georgia, Tahoma, sans-serif;
margin-right: 10px;
line-height: 0.35em;
}

Вы можете видеть, что здесь имеется два селектора, примененных к этой буквице. В CSS предусмотрен псевдо-класс под названием :first-letter, который определяет самую первую букву в любом элементе. Учтите, что это этот эффект не будет работать, если в вашем элементе параграфа имеется другой элемент, предшествующий тексту (вроде картинки). Если вам необходимо поместить изображение в абзац с буквицей, вы можете использовать CSS background вместо HTML-тэга img. При помощи селектора :first-letter, мы можем применить буквицу к любому абзацу за счет класса .first.

Однако с другим классом, .dropcap, мы можем применить эффект за счет оборачивания буквы в span-элемент. Это будет выглядеть как
<span class=”dropcap”>буква</span>
в HTML-документе. Для CMS вроде Wordpress легче всего будет создать шаблон с поддержкой класса .first, примененного к каждому первому абзацу в ваших публикациях или на страницах.

p.altdrop:first-letter, .dropcap-alt {
float: left;
background: #434343;
color: #fff;
font-size: 2.2em;
padding: 10px 14px;
margin-right: 8px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

Мы также создали альтернативный эффект буквицы, который создает затемнение фона вокруг самой буквы. Учтите, что в данном альтернативном варианте используется семейство шрифтов Helvetica Neue, в то время как исходная буквица изменяется на Georgia или другой шрифт с засечкой. Это создает примерный эффект, который мы часто видим в книгах, и переносит его на экран компьютера.

На данный момент второй абзац на странице использует класс .bigger, который просто слегка увеличивает размер шрифта и высоту строки по всему абзацу. Некоторые веб-сайты предпочитают выделять таким образом первый абзац. Однако вы можете комбинировать буквицы с большим текстом, и это поможет вам привлечь внимание посетителей.

Внутренние цитаты

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

.pull {
display: block;
float: right;
width: 28%;
padding: 16px;
margin-bottom: 1.25em;
background: #edefec;
color: #656565;
font-style: italic;
font-size: 1.65em;
line-height: 1.55em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}

В нашем примере вы можете видеть специальное оформление цитат, схожее с тем, что используется на сайте Design Shack. Здесь используется слегка затемненный фон, а также CSS3 box-shadow. Текст внутренней цитаты также слегка увеличен, и выделяется среди остальных абзацев. Также важно использовать выравнивание подобных цитат по левому или правому краю, чтобы они отличались от обычных кавычек в тексте.

blockquote {
color: #909090;
font-size: 1.35em;
line-height: 1.5em;
font-style: italic;
border-left: 5px solid #ab9f5c;
padding: 12px 20px;
margin-left: 20px;
margin-bottom: 30px;
quotes: none;
}

При использовании HTML5-элемента blockquote, вы также можете включать и внутренние элементы. Некоторые blockquote-элементы могут также включать в себя несколько абзацев и даже цитирования. В стиле дизайне используются отступы и поля, и это поможет создать впечатление отделенности от простых абзацев. Левая граница представляет собой нечто вроде маркера, который помогает читателям быстро различить blockquote от остальных абзацев.

Оформление символов

Хотя это достаточно незначительный эффект, посетители обращают на него внимание при чтении страниц. HTML-элементы используются для отображения символов в вашем тексте. Эти элементы могут использовать что-то вроде Font Awesome для отображения стилизованных иконок, либо вы можете использовать их для отображения простых HTML-символов.

.fancyamp {
font-family: 'Gabriela', 'Trebuchet MS', serif;
font-size: 1.6em;
}

В нашем примере используется амперсанд с оборачивающим span-элементом. Это позволит нам изменить семейство шрифтов на Gabriela, где используются более выраженные засечки. Span-элемент с классом .fancyamp поможет вам применить это семейство шрифтов к элементу без необходимости оказывать влияние на остальной текст. Мы также слегка увеличили размер, чтобы выделить этот символ среди остальных.

Однако вам не следует думать, что подобный эффект можно применять только для амперсандов. Символы копирайта, дробных частей и другие HTML-элементы также можно украсить при помощи такого стиля. Возможно, вам следует подумать над другими эффектами вроде полужирного текста, наклонного или измененного цвета текста.

Ссылки и подсвечивание

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

a {
color: #639f3b;
text-decoration: none;
}
a:hover {
background: #baff90;
color: #3c5331;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 1px 2px;
margin: 0 -2px;
z-index: 99999;
text-decoration: none;
}

.highlight {
background: #ffffaa;
padding: 1px 2px;
}

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

Так как здесь мы использовали отступы слева и справа, нам нужно было воспользоваться отрицательными полями, чтобы компенсировать появившееся пространство при наведении на каждую ссылку. Здесь также используется отступ в классе .highlight, однако так как здесь не требуется дизайна для :hover, вы и ваши посетители никогда не заметите дополнительного пространства.

.notice {
display: block;
padding: 12px 20px;
background: #fff5af;
color: #a79b44;
text-shadow: 1px 1px 0 #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

Если вам недостаточно такого эффекта, вы всегда можете создать дополнительные классы для определения абзацев. Наш класс .notice в значительной степени изменяет цвет текста, и он отлично сочетается с высвеченным оттенком желтого на фоне. Используя свойства CSS3 text-shadow мы добиваемся большей заметности.

В завершение

Мы бы не рекомендовали вам использовать данные эффекты на каждой странице вашего сайта. Однако это поможет вам сделать определенные разделы сайта более привлекательными.

Пользователям нравится грамотное оформление и структурирование текстового контента на сайте. Вы можете скопировать представленные здесь коды, и поиграть с эффектами, оптимизировав таблицы стилей под собственные проекты.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 7135   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031