Эффект буквицы с помощью CSS3

Эффект буквицы с помощью CSS3

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

автор

Перевод выполнила: Валерия Заруцкая

Меня зовут Валерия, я живу в Киеве. Переводчик в прошлом, сейчас я фронт-энд разработчик. Неплохо владею HTML5 и CSS3, Twitter bootstrap, адаптивной версткой, работаю с jQuery, активно изучаю чистый JavaScript, имею представление об MVC фреймворках, в частности Ruby on Rails.

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

скачать исходникидемо

Общая разметка страницы

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

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

/** типографика **/
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 вместо тэга img в HTML. Вместе с селектором :first-letter мы можем применить эффект буквицы к любому абзацу, используя класс .first.

Но вместе с другим классом .dropcap мы могли бы применить эффект предварительно заключив букву в тэг span. В HTML документе это будет выглядеть следующим образом: L. Для 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, который увеличивает размер шрифта и высоту строки всего абзаца. На некоторых сайтах разработчики предпочитают сделать первый абзац больше, чтобы сделать его более заметным на странице. Но вы можете попробовать сочетать буквицу с увеличенным текстом, чтобы наверняка привлечь внимание читателя.

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

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

.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 для придания более привлекательного вида. Текст внутренних цитат сделан больше основного текста, чтоб он выделялся на фоне многих остальных абзацев. Важно задать этим цитатам свойство float с выравниванием по левому или правому краю для того, чтобы они отличались от обычных блочных цитат.

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 позволяет поместить другие элементы внутри него. Некоторые блочные цитаты могут содержать большое количество абзацев, а также цитирование. Дизайн стилей использует множество внутренних и внешних отступов (margin, padding) для создания пространства между обычными абзацами. Левая граница выглядит как маркер, чтобы помочь читателям мгновенно отличить блочную цитату от окружающих абзацев.

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

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

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

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

Но не думайте, что подобный эффект можно применить только к амперсанду. Значки копирайта, дроби и другие спецсимволы HTML могут иметь отдельное стилевое оформление. Вы также можете применить курсив, жирный шрифт или изменить цвет.

Ссылки и выделение

В нескольких первых параграфах вы найдете выделенный текст с изящно оформленной ссылкой. Оба они используют дополнительный внутренний отступ (padding), т.к. оба используют фоновые цвета.

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;
}

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

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

.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 улучшает читабельность. Вы также можете создать дублирующие классы для нотификаций в других цветовых схемах, например зеленых или синих.

Заключение

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

Автор: Jake Rocheleau

Источник: http://designshack.net/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree