CSS3 для начинающих. Часть 3.1. Красивая типографика для сайта с помощью CSS3.

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


Существует мнение, что красивые и удобные сайты создаются с использованием красивой и удобной типографии. Есть даже статьи где утверждается что веб состоит на 95% из типографии. Не факт, что этого мнения стоит придерживаться, но оно существует. И это делает типографику очень важным элементом при создании сайта.
типографика с помощью css3

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

Сегодняшний туториал будет как раз на тему как создать красивую типографию для сайта используя самые простые приемы CSS3 (многие из которых доступны и в CSS2).

Подготовка макета.

До того как мы начнем работать со стилями, нам необходимо задать некий макет и наполнить его контентом. Все что требуется на данном этапе — это создать чистый HTML документ. Не будем тратить на него много времени и воспользуемся данным примером


Web Typography A Demo For Beautiful Typography on the Web

 

An Article by Matt Ward

 

It has been suggested that beautiful and usable websites are created on a foundation of beautiful and usable typography. That makes it a pretty important element that you will want to look at very carefully.

Fortunately, CSS offers a variety of styling options that allow you a great deal of control over how your present your content to your viewers and users. This demo — which is entirely driven by CSS — is built to demonstrate the step by step development of attractive typography, moving from basic HTML to fully styled content. You can use the buttons at the top of the page to view the content in various stages of styling, from completely unstyled to the completed design. Please feel free to have a bit of fun by working through the various stages.

Created: May 13, 2010

Тут мы имеем заголовок, часть которого взята в тег span. Далее следует мета информация об авторе, несколько абзацев текста и дата его создания. Если мы посмотрим на этот текст без стилизации то увидим примерное такое:
типографика CSS3 шаг 1

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

Шаг 1. Заголовок.

Первое что мы сделаем — это поработаем над нашим заголовком. Изменим цвет, поиграем с шрифтом, размером шрифта и добавим тень. Код будет выглядеть так:

h1{
  font-size: 2.5em;
  font-family: Georgia;
  letter-spacing: 0.1em;
  color: rgb(142,11,0);
  text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

В итоге мы получим вот такой жирный заголовок:
типографика CSS3 шаг 2

Давайте разберемся что мы прописали в стиле заголовка. Сначала мы увеличили размер шрифта до 2.5em и добавили приятный красный цвет, используя rgb значение. Далее мы сменил шрифт на Georgia, который является веб-безопасным шрифтом и выглядит вполне приятно. Так как шрифт Georgia кажется мне немного жестким, я совсем немного увеличил расстояние между символами, используя свойство letter-spacing. Далее мы добавили эффект вдавленного текста используя узкую тень белого цвета, которая больше похожа на подсветку. Использовали мы свойство text-shadow.

Шаг 2. Подзаголовок.

Заголовок сейчас выглядит намного лучше. Но мы так же хотим отделить подзаголовок от основного заголовка. Подзаголовок мы выделили в тег span, который позволит нам использовать другой стиль для подзаголовка:

h1 span{
  display: block;
  margin-top: 0.5em;
  font-family: Verdana;
  font-size: 0.6em;
  font-weight: normal;
  letter-spacing: 0em;
  text-shadow: none;
}

Мы создали с помощью этого кода логическое разбиение заголовка и подзаголовка применив в описании стиля отображение block. Так же мы визуально отделили заголовки использую меньший размер шрифта, убрав жирность шрифта и сменив сам шрифт с Georgia на sans serif Verdana. Обратите внимание, что мы не тронули свойство color, так как свойства CSS для заголовка наследуются свойствами подзаголовка.

Итог выглядит довольно приятно, так как мы старались сохранить похожесть стилей заголовка и подзаголовка, но при этом и визуально разграничить их.
типографика CSS3 шаг 4

Мы так же избавились от эффекта тени (text-shadow) и не использовали преобразование текста с помощью эффекта letter-spacing.

Шаг 3. Блок Мета.

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

.meta{
  font-family: Georgia;
  color: rgba(69,54,37,0.6);
  font-size: 0.85em;
  font-style: italic;
  letter-spacing: 0.25em;
  border-bottom: 1px solid rgba(69,54,37,0.2);
  padding-bottom: 0.5em;
}

Я опять использовал шрифт Georgia, но при этом сделал его наклонным, увеличил расстояние между символами (letter-spacing) и применил RGBA метод для задания цвета. RGBA схема позволяет кроме цвета задать и четвертый параметр — прозрачность — для этого мы используем значение между 0.0 и 1.0. Это свойство так до конца и не поддерживается в старых версиях IE, но позволяет с легкостью получить нужные оттенки цветов.
типографика CSS3 шаг 5

Шаг 4. Доработка блока Мета.

Далее мы добавим маленький эффект к блоку мета. Вы могли заметить, что я выделил слово «статья» и имя автора в теги span. Сделал я это для того, чтобы применить к ним немного другой набор свойств:

.meta span{
  text-transform: capitalize;
  font-style: normal;
  color: rgba(69,54,37,0.8);
}

Я сделал все буквы текста заглавными. Хотя вариант со всеми прописными буквами тоже смотрелся бы неплохо. Я так же отказался от наклонного текста и увеличил прозрачность для того чтобы усилить визуальную разницу этих слов с остальным текстом.

Шаг 5. Двух колоночный текст.

Исторически создание колонок с помощью CSS сводилось к магическим действиям с float и использованием нескольких контейнеров для текста. Это конечно было лучше использования таблиц, но не было идеальным решением. А вот с появлением новых элементов типографики в CSS3 создание колонок стало гораздо проще. Мы будем использовать часть новых свойств для создания двух колоночного текста далее:

.body p{
  font-family: Verdana;
  -moz-column-count: 2;
  -moz-column-gap: 1em;
  -webkit-column-count: 2;
  -webkit-column-gap: 1em;
  column-count: 2;
  column-gap: 1em;
  line-height: 1.5em;
  color: rgb(69,54,37);
}

К сожалению мы вынуждены увеличить код и использовать конструкции -moz- и -webkit- для того чтобы быть максимально уверенными что наш код будет обработан в максимальном числе браузеров. Напомню, что такие конструкции мы используем для браузеров Mozilla Firefox и webkit браузеров — Safari и Google Chrome.
С использованием свойства column-count вы можете установить нужное вам количество колонок, а с помощью свойства column-gap задать расстояние между колонками.
Я применил эти свойства к тегу p. Но вы можете применять их к тегам div, тем самым выводя все дочерние элементы в том виде, который вам требуется.
Я применил тот же шрифт Verdana, что и для заголовка, чтобы создать видимость общей стилизации всего контента.
типографика CSS3 шаг 6

Шаг 6. Используем псевдо-классы и селекторы.

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

.body p:first-child{
  font-size: 1.25em;
  font-family: Georgia;
  font-style: italic;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
  letter-spacing: 0.1em;
}
.body p:first-child:first-line{
  font-weight: bold;
}

Хотелось бы немного пояснить код. Сначала я использую псевдо-класс first-child чтобы определить первый параграф в нашем тексте (body). Этот маленький селектор позволяющий нам выделить начало текста и придать ему выразительности.
Я так же решил сделать акцент на первый параграф, добавив ему жирность. Я так же растянул его на ширину двух колонок и изменил шрифт на наклонный Georgia тем самым еще больше усилив акцент на первом абзаце.
Вы также заметили последние две строчки кода, назначение которых, объединив два псевдо-класса first-child и first-child:first-line, дать нам доступ к первой строке первого абзаца. Ее мы сделали жирной (bold).
типографика CSS3 шаг 7

Шаг 7. Работа с блоком Дата.

Мы почти закончили с нашей типографикой. Последним штрихом будет работа над блоком с датой создания поста.

date{
  font-family: Georgia;
  color: rgba(69,54,37,0.6);
  font-size: 0.75em;
  font-style: italic;
  letter-spacing: 0.25em;
  border-top: 1px solid rgba(69,54,37,0.2);
  display: block;
  padding-top: 0.5em;
  margin-top: 2em;
}

Свойства для блока даты очень похожи на свойства для блока мета. Единственное отличие в том, что я уменьшил размер шрифта для того чтобы соблюсти визуальное разделение текста и поменял свойство border с bottom на top.
Так как блок с датой у нас изначально изображен в одну линию, я применил свойство display с параметром block. И в самом конце я применил свойство margin-top чтобы отделить блок с датой от всего остального текста.
типографика CSS3 шаг 8

Итоги работы с типографикой.

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

  • 1. Несмотря на использование всего двух шрифтов мне удалось создать широкий диапазон стилей, используя свойства CSS и CSS3. Теперь мы можем использовать всего несколько шрифтов, что позволяет сохранить единство дизайна.
  • 2. Свойства letter-spacing и line-spacing это те свойства, которыми многие пренебрегают при создании типографики. Однако это именно те свойства CSS, которые позволяют внеся минимальные изменения в код создать при этом уникальный дизайн.
  • 3. Искусство типографии это не только варьирование цветов, размеров, шрифтов. Это даже не трекинг с кернингом 😉 Все это всего лишь понятия, которые используются в типографике. Один из способов реальной типографики это визуальная иерархия, которая отражает важность каждого отдельно взятого элемента.
  • 4. Наконец, основное правило — каждый элемент важен. Хорошая типографика никогда не принимает стандартов. Наоборот — типографика требует тщательного рассмотрения каждого элемента независимо от того, каким незначительным он может казаться. В конечном итоге элемент может наследовать стандартные свойства, но это должно быть осознанным выбором стиля этого элемента.

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

Посмотреть демо

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

На данный момент мне часто требуются услуги переводчика, т.к. я занимаюсь не только проектами под рунет. Вот к примеру перевод с монгольского очень трудно найти и заказать, а компания «Мастер перевода» предлагает данную услугу, да еще и по демократичной цене.



Запись опубликована в рубрике CSS3 с метками , , , . Добавьте в закладки постоянную ссылку.

5 комментариев: CSS3 для начинающих. Часть 3.1. Красивая типографика для сайта с помощью CSS3.

  1. Аянами Рей говорит:

    Не типография, а типографика.

  2. Гилязетдинов Руслан говорит:

    спорить можно долго. в данной контексте больше подходит типографика. но переводчики и словари так же дают перевод типография и книгопечатание… я думаю применять типографию тут вполне уместно…

  3. Игроман говорит:

    Здорово! Без лишнего труда создал красивый дизайн. Молодец.

  4. Sssccc говорит:

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

    Имиджборда разделена на несколько категорий, каждая из которых отведена под определенную тематику картинок/обсуждений и в каждой из которых действуют некоторые правила (весьма либеральные, в большинстве случаев). Правила выводятся под каждой формой ответа (и под каждой формой старта нового топика).

    Интерфейс сеймчана весьма не очевиден (как и основная масса того, что вытворяют пришельцы с марса японцы), но привыкнуть к нему можно весьма быстро, если внимательно смотреть и немного думать. Основная проблема начинающих — путающиеся в голове формы для старта нового топика и для ответа на топик.

    Благо, в случае ошибки любой пользователь может удалять свои сообщения. Для этого надо просто отметить чекбокс рядом с сообщением и нажать кнопку Удалить на самом дне страницы. Если у вас по какой-либо причине не работают cookies, то для возможности удаления своих постов надо:
    1. При написании сообщения вбивать какой-нибудь пароль в соотв. поле.
    2. При удалении указывать этот пароль внизу страницы, рядом с кнопкой Удалить.
    Если cookies работают нормально, то пароль генерируется и вводится во все нужные поля автоматически, вам даже не нужно его знать.

    Как уже писал выше, регистрация на samechan.org невозможна, но для желающих утвердиться на почве форума существуют трипкоды — своеобразные пароли, которые при возникновении необходимости помогают доказать, что вы — это вы. Трипкоды вводятся в поле Имя после вашего ника (не обязательно) и после знака решетки (#), например: Chuvak#mypassword. После отправки ответа на форум ваш трипкод преобразуется в хрень вида !lIOcxP5MFM и будет служить уникальным идентификатором вашей личности (если трипкод не сопрут).

    Спрашивайте, если что-то интересно или неясно. Разрулим.

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

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