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

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

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

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

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

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

Я выбрал «Helvetica Neue» как основной шрифт для всей страницы. Это шрифт без засечек альтернативный шрифту Helvetica, но выбор типографики для специальных элементов страницы не должен ограничиваться этим шрифтом. До того как мы начнем разбираться с эффектами, стоит отредактировать HTML. Посмотрите на некоторые названия классов и разнообразные элементы, которые я использовал для различных целей в каждом абзаце.

Буквица

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

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

Но вместе с другим классом .dropcap мы могли бы применить эффект предварительно заключив букву в тэг span. В HTML документе это будет выглядеть следующим образом: L. Для CMS систем, таких как WordPress проще всего создать тему, которая поддерживает класс .first, добавляемый к каждому первому абзацу в ваших постах или станицах (либо и для тех и для других).

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

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

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

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

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

Элемент HTML5 blockquote позволяет поместить другие элементы внутри него. Некоторые блочные цитаты могут содержать большое количество абзацев, а также цитирование. Дизайн стилей использует множество внутренних и внешних отступов (margin, padding) для создания пространства между обычными абзацами. Левая граница выглядит как маркер, чтобы помочь читателям мгновенно отличить блочную цитату от окружающих абзацев.

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

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

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

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

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

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

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

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

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

Заключение

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

Автор: Jake Rocheleau

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

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

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