Курс «Мастерская: декоративные элементы»

Социальные кнопки, шаг 1 [1/18]

Начнём прохождение курса с простой задачи — вёрстки кнопок социальных сетей.

Обычно такие кнопки являются просто ссылками на страницы компании в социальных сетях. Стилизация работающих «лайков» является более сложной задачей.

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

Что повторить:

1. Что такое ссылка?

2. Каскадность. Коктейль из классов

décor/step-1.html

Социальные кнопки, шаг 2 [2/18]

Мы будем выстраивать кнопки в ряд и задавать им размеры, поэтому нужно использовать блочно-строчный тип элемента.

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

На этом этапе мы задаем общие стили кнопок, поэтому записываем их в CSS-правило для класса social.

Что повторить:

1. Блочно-строчный тип

2. Ширина и высота

3. Внешние отступы

4. Цвет фона

5. Вертикальное выравнивание

décor/step-2.html

Социальные кнопки, шаг 3 [3/18]

У нас есть 3 серых ссылки-квадрата, осталось покрасить их в цвета соцсетей и добавить иконки.

В этом курсе мы часто будем использовать спрайты. Вот изображение-спрайт с иконками соцсетей:

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

Обратите внимание, что CSS-правила для конкретных соцсетей расположены в коде ниже, чем правило, задающее общий вид. Это нужно, чтобы работало переопределение CSS-свойств.

Что повторить:

1. Фоновое изображение

2. Повторение фона

3. Расположение фона

4. Спрайты

5. Каскадность и приоритеты

décor/step-3.html

Переключатель страниц, шаг 1 [4/18]

Теперь потренируемся верстать переключатель страниц. Обычно разметка переключателей очень проста: это один див, внутри которого расположены ссылки с номерами страниц и ссылки «Вперёд/Назад».

Иногда внутри переключателя используют спаны, например, для «многоточий». Также переключатели иногда верстают списками.

Для начала зададим для ссылок и спанов блочно-строчный тип, размеры, внутренние отступы и фон.

Обратите внимание, что мы задаём не ширину, а минимальную ширину min-width, т.к. номера страниц могут быть длинными: 1 и 1000. Благодаря сочетанию паддингов и минимальной ширины, номер страницы будет всегда смотреться хорошо.

Что повторить:

1. Внутренние отступы

décor/perekluchatel-step-1.html

Переключатель страниц, шаг 2 [5/18]

Теперь оформим текст переключателей.

Сначала зададим горизонтальное выравнивание по центру. Затем зададим вертикальное выравнивание по середине. Чтобы был виден эффект вертикального выравнивания, нужно задать высоту строки такую же, как высота элемента, т.е. 40px.

Затем зададим цвет ссылок, уберем подчеркивание и сделаем шрифт полужирным.

Что повторить:

1. Горизонтальное выравнивание

2. Вертикальное выравнивание

3. Высота строки

4. Текстовые эффекты

5. Выделение жирным

décor/perekluchatel-step-2.html

Переключатель страниц, шаг 3 [6/18]

Займемся переключателями «вперед» и «назад». Пока что мы используем текстовые надписи. Но мы их спрячем и заменим на стрелочки.

Первым делом добавим к переключателям классы prev и next. Чтобы спрятать текст, используем свойство text-indent с большим отрицательным значением.

Затем отделим переключатели от номеров страниц с помощью отступов и с помощью уже знакомой техники спрайтов добавим на фон стрелочки. Вот спрайт на тёмном фоне:

décor/perekluchatel-step-3.html

Переключатель страниц, шаг 4 [7/18]

Переключатель страниц почти готов. Но хороший верстальщик и хороший дизайнер всегда думают о мелочах.

В этом задании мы поработаем над состояниями элементов переключателя.

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

Менее очевидная деталь относится к состояниям кнопок-стрелочек «вперед» и «назад». Когда мы находимся на первой странице, кнопка «назад» должна быть неактивна, а когда на последней странице — неактивна кнопка «вперед».

Оформим неактивные кнопки с помощью класса disabled, который будет делать кнопку полупрозрачной.

décor/perekluchatel-step-4.html

Переключатель страниц, тестирование [8/18]

Теперь оттестируем наш переключатель в разных состояниях.

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

décor/perekluchatel-step-5.html

Испытание: карточка курса [9/18]

В этом испытании вам нужно с нуля сверстать карточку курса. Используйте ту HTML-разметку, которую считаете нужной.

Адрес картинки-спрайта и подсказка есть в комментарии в CSS-коде. А вот используемые цвета:

1. #1abc9c светло-зеленый

2. #16a085 темно-зеленый

décor/step-9.html

Контакты, шаг 1 [10/18]

В этой серии заданий мы оформим невзрачный и скучный блок контактов.

Блоки с контактной информацией, похожие на тот, который вы видите в мини-браузере, встречаются на многих сайтах. Штука нехитрая — пишем адрес, сайт и email, а потом добавляем переносы строк с помощью <br>.

Как улучшить оформление этого блока?

Во-первых, выделить заголовок и добавить отступы между элементами контактов. Во-вторых, добавить для каждого элемента небольшие иконки.

Давайте начнем.

décor/step-10.html

Контакты, шаг 2 [11/18]

Заголовок и отступы сделали блок контактов более структурированным.

Отступы слева, как вы уже догадались, предназначены для размещения иконок.

Иконки будем размещать по одной из классических техник: «абсолютные элементы + спрайты».

В каждом из блоков.item есть пустой див.icon, в котором и будет отображаться иконка.

Специальные дивы в этом задании мы будем использовать для наглядности. Лучше иконки выносить в фон псевдоэлементов::before и::after, чтобы не «засорять» разметку.

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

Осталось задать для.icon картинку-спрайт в качестве фона. Вот она:

décor/step-11.html

Контакты, шаг 3 [12/18]

На последнем шаге нужно задать каждому элементу контактов свою иконку.

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

И финальный штрих — зададим цвет ссылок, который сочетается с цветом иконок.

décor/step-12.html

Комментарии, шаг 1 [13/18]

В последней серии заданий мы сверстаем список комментариев.

Кстати, обратите внимание на CSS. В предыдущих заданиях мы создавали пространства имён классов в CSS с помощью контекстных селекторов. Например:

.contacts.title {}.contacts.item {}

О пространствах имен уже говорилось в курсе про меню.

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

.comment-avatar {}.contacts-title {}

Оба способа хороши и используются в зависимости от предпочтений. Самое главное — использовать пространства имён.

В этом задании мы начнём оформлять блоки аватара и автора комментария.

décor/step-13.html

Комментарии, шаг 2 [14/18]

Продолжаем работу. На этом шаге оформим сам текст комментария и дату комментария.

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

В нашем случае дата комментария не столь важна, поэтому её и приглушим.

décor/step-14.html

Комментарии, шаг 3 [15/18]

На этом шаге оформляем кнопку ответа на комментарий.

Все приёмы вам уже знакомы: кнопка будет абсолютно спозиционированным элементом с фиксированными размерами. На фон ей зададим иконку. Затем разместим кнопку в правом верхнем углу комментария.

Блок комментария обладает относительным позиционированием, поэтому проблем с размещением иконки не возникнет.

décor/step-15.html

 

Комментарии, шаг 4 [16/18]

Сейчас подготовимся к позиционированию аватара.

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

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

décor/step-16.html

 

 

 

 

Комментарии, шаг 5 [17/18]

Теперь осталось только задать аватару абсолютное позиционирование и разместить его сверху и слева.

Достаточно необычные комментарии, но способ их создания очень простой.

décor/step-17.html

 

Испытание: анонс поста [18/18]

Финальное испытание достаточно сложное, поэтому HTML-разметку делать не придется. Но обилие множества декоративных элементов заставит вас попотеть.

Адреса картинок и подсказки есть в комментарии в CSS-коде. А вот используемые цвета:

1. #ffffff

2. #7f8c8d серый

3. #2980b9 синий

4. #bdc3c7 светло-серый

 

Курс «Знакомство с HTML5»

Хедер и футер. Теги header и footer [1/19]

В этом вводном курсе мы познакомимся с новыми возможностями HTML5. Основной упор сделаем на новые теги, но коснёмся и других нововведений.

Мы будем пошагово собирать блог известного вам веб-разработчика, используя появившиеся в HTML5 теги и применяя другие новшества. Но сначала несколько важных фактов об HTML5:

· HTML5 обратно совместим с HTML4.

· Многие модули HTML5 имеют хорошую поддержку во всех текущих браузерах.

· TML5 не цельная спецификация, а набор модулей разной степени готовности.

· HTML5 с нами надолго.

Это означает, что HTML5 можно использовать уже сейчас. Для этого достаточно задать такой тип документа:

<!DOCTYPE html>

Что вы уже давным-давно делаете в наших курсах.

А теперь пара новых тегов:

· <header> — хедер сайта или раздела;

· <footer> — футер сайта или раздела.

Да-да, это те самые хедер и футер, которые обычно верстались дивами с классами header или footer. Они были настолько распространены, что для них было решено создать собственные теги.

znakomstvo-html5/zn-html5-1.html

Основное содержание. Тег main [2/19]

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

Хедер — это не только привычная шапка сайта с логотипом и меню, он может использоваться и как «шапка» какой-нибудь статьи или раздела сайта. Конечно, в случае со статьёй хедер называют не «шапкой», а вводной частью, в которой могут содержаться заголовки, оглавление и так далее.

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

А раз теги неуникальные, то и стилизовать их лучше с помощью классов, как мы и сделали.

Если вы не хотите использовать классы для шапки и подвала сайта, то можете использовать селекторы body > header и body > footer. Эти селекторы не повлияют на хедеры и футеры, вложенные более глубоко.

Другое дело новый тег <main>, который обозначает основное содержание сайта и по спецификации может использоваться на странице только один раз. Для его стилизации никакие классы не нужны.

Кстати, загляните в CSS и посмотрите, как сделаны фоны для основных блоков. В хедере и футере мы использовали линейные градиенты, которые детально разберём в более позднем курсе. А фоновую картинку для основного содержания мы задали с помощью так называемого data:URI, закодировав изображение прямо в CSS-коде. Это одна из продвинутых техник оптимизации вёрстки.

znakomstvo-html5/zn-html5-2.html

Разделы страницы. Теги article и section [3/19]

С шапками, подвалами и основным содержанием разобрались. Теперь перейдём к остальным разделам сайта.

Раньше почти все разделы верстались на дивах. Но в HTML5 добавили сразу два новых тега для разметки разделов:

· <section> — смысловой или логический раздел документа;

· <article> — самостоятельный и независимый раздел документа.

Чтобы не было путаницы, разберём где и когда использовать разные контейнеры:

· <div> — контейнер общего назначения, не обязательно смысловой. Дивы используются для разметки мелких блоков, создания сетки и декоративных эффектов.

· <section> — более крупный логический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле и так далее.

· <article> — самостоятельный, цельный и независимый раздел документа. Этот раздел можно в неизменном виде использовать в различных местах, в том числе и на других сайтах. Примеры: статья, пост в блоге, сообщение на форуме и так далее.

В этом задании мы сверстаем блок «Обо мне» как независимый раздел, который можно будет использовать в разных местах сайта. А список постов — это логический раздел, группирующий последние посты, поэтому для него используем <section>.

znakomstvo-html5/zn-html5-3.html

Изображения в формате SVG [4/19]

Мы разметили базовые разделы нашей страницы. Теперь поработаем над каждым из них и начнём с шапки сайта.

Давайте добавим нашему сайту логотип. Для этого добавим в хедер <div>, а внутри него разместим привычное изображение. Используем картинку в векторном формате SVG, который уже достаточно хорошо поддерживается браузерами. Векторные изображения можно уменьшать и увеличивать без потери качества, в этом вы убедитесь в задании.

Кстати, обратите внимание на полупрозрачный фон в блоке «Обо мне». Он сделан с помощью нового формата записи цветов в CSS — rgba.

 

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Изображения в формате SVG</title>

<meta charset="utf-8">

<style>

html,

body {

margin: 0;

padding: 0;

color: white;

background-color: #2c3e50;

}

 

/* Header */

header.page-header {

position: relative;

z-index: 5;

min-height: 20px;

padding: 20px;

color: white;

background-image:

linear-gradient(45deg, #34495e 25%, transparent 25%),

linear-gradient(-45deg, #34495e 25%, transparent 25%),

linear-gradient(135deg, #34495e 25%, transparent 25%),

linear-gradient(-135deg, #34495e 25%, transparent 25%);

background-position: 10px 0, 10px 0, 0 0, 0 0;

background-size: 20px 20px;

box-shadow: 0 0 5px 0 #333333;

}

 

.logo {

position: absolute;

top: 10px;

left: 20px;

margin: 0;

}

 

/* Main */

main {

display: block; /* для страховки, очень новый элемент */

min-height: 200px;

padding-top: 50px;

color: black;

background-color: white;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAABlBMVEX///+pqalTpKl9AAAAAnRSTlMAGovxNEIAAAAdSURBVDjLY2AAAUaG4UYxDDsfjfp91O+jfqfE7wCzpQCw/dq+qQAAAABJRU5ErkJggg==");

}

 

main::after {

content: "";

display: table;

clear: both;

}

 

.about-me {

min-height: 100px;

margin: 0 20px;

padding: 10px;

background-color: rgba(241, 196, 15, 0.1);

border-radius: 5px;

box-shadow: 0 0 3px #cccccc;

}

 

.posts {

min-height: 50px;

margin: 20px 0;

padding: 20px;

background: #f5f5f5;

box-shadow: 0 0 5px #cccccc;

}

 

/* Footer */

footer.page-footer {

min-height: 50px;

padding: 20px;

font-size: 14px;

color: black;

background-color: #f1c40f;

background-image: linear-gradient(45deg, transparent 50%, white 50%),

linear-gradient(-45deg, transparent 50%, white 50%),

linear-gradient(135deg, transparent 50%, #2c3e50 50%),

linear-gradient(-135deg, transparent 50%, #2c3e50 50%);

background-repeat: repeat-x;

background-position: 0 0, 0 0, 0 100%, 0 100%;

background-size: 10px 12px;

}

 

</style>

</head>

<body>

<header class="page-header">

<!-- Хедер->

<div class="logo">

<img src="/assets/course73/logo.svg" width="300" height="300" />

</div>

</header>

<main>

<article class="about-me">

Обо мне

</article>

<section class="posts">

Последние посты

</section>

</main>

<footer class="page-footer">

Футер

</footer>

</body>

</html>

 

Задание

1. Добавьте в хедер div с классом logo.

2. Цель 2 Внутрь дива вставьте изображение с адресом
/assets/course73/logo.svg, шириной и высотой 90 пикселей.

3. Цель 3 Увеличьте ширину и высоту этого изображения до 300 пикселей.

Размеры изображения задавайте с помощью атрибутов тега <img>, как вэтом задании.

Результат

 

Курс «Знакомство с HTML5»

Навигация. Тег nav [5/19]

Теперь давайте добавим в шапку главное меню.

В HTML5 добавили специальный элемент для навигационных блоков — тег <nav>. Так что теперь меню и блоки ссылок лучше оборачивать не в дивы, а в навы.

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

 

 

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Навигация. Тег nav</title>

<meta charset="utf-8">

<style>

html,

body {

margin: 0;

padding: 0;

color: white;

background-color: #2c3e50;

}

 

/* Header */

header.page-header {

position: relative;

z-index: 5;

min-height: 20px;

padding: 20px;

color: white;

background-image:

linear-gradient(45deg, #34495e 25%, transparent 25%),

linear-gradient(-45deg, #34495e 25%, transparent 25%),

linear-gradient(135deg, #34495e 25%, transparent 25%),

linear-gradient(-135deg, #34495e 25%, transparent 25%);

background-position: 10px 0, 10px 0, 0 0, 0 0;

background-size: 20px 20px;

box-shadow: 0 0 5px 0 #333333;

}

 

.logo {

position: absolute;

top: 10px;

left: 20px;

margin: 0;

}

 

.main-menu ul {

margin: 0;

margin-left: 130px;

padding: 0;

list-style: none;

}

 

.main-menu li {

display: inline-block;

margin-right: 1em;

}

 

.main-menu a {

color: white;

}

 

/* Main */

main {

display: block; /* для страховки, очень новый элемент */

min-height: 200px;

padding-top: 50px;

color: black;

background-color: white;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAABlBMVEX///+pqalTpKl9AAAAAnRSTlMAGovxNEIAAAAdSURBVDjLY2AAAUaG4UYxDDsfjfp91O+jfqfE7wCzpQCw/dq+qQAAAABJRU5ErkJggg==");

}

 

main::after {

content: "";

display: table;

clear: both;

}

 

.about-me {

min-height: 100px;

margin: 0 20px;

padding: 10px;

background-color: rgba(241, 196, 15, 0.1);

border-radius: 5px;

box-shadow: 0 0 3px #cccccc;

}

 

.posts {

min-height: 50px;

margin: 20px 0;

padding: 20px;

background: #f5f5f5;

box-shadow: 0 0 5px #cccccc;

}

 

/* Footer */

footer.page-footer {

min-height: 50px;

padding: 20px;

font-size: 14px;

color: black;

background-color: #f1c40f;

background-image:

linear-gradient(45deg, transparent 50%, white 50%),

linear-gradient(-45deg, transparent 50%, white 50%),

linear-gradient(135deg, transparent 50%, #2c3e50 50%),

linear-gradient(-135deg, transparent 50%, #2c3e50 50%);

background-repeat: repeat-x;

background-position: 0 0, 0 0, 0 100%, 0 100%;

background-size: 10px 12px;

}

 

</style>

</head>

<body>

<header class="page-header">

<div class="logo">

<img src="/assets/course73/logo.svg" width="90" height="90">

</div>

<nav class="main-menu">

<ul>

<li><a href="#home">Главная</a></li>

<li><a href="#blog">Посты</a></li>

<li><a href="#me">Обо мне</a></li>

</ul>

</nav>

</header>

<main>

<article class="about-me">

Обо мне

</article>

<section class="posts">

Последние посты

</section>

</main>

<footer class="page-footer">

Футер

</footer>

</body>

</html>

Курс «Знакомство с HTML5»

Завершаем футер [6/19]

Теперь перейдем к доработке подвала сайта. Там нет ничего сложного. Просто нужно добавить пару смысловых разделов.

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

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Завершаем футер</title>

<meta charset="utf-8">

<style>

html,

body {

margin: 0;

padding: 0;

color: white;

background-color: #2c3e50;

}

 

/* Header */

header.page-header {

position: relative;

z-index: 5;

min-height: 20px;

padding: 20px;

color: white;

background-image:

linear-gradient(45deg, #34495e 25%, transparent 25%),

linear-gradient(-45deg, #34495e 25%, transparent 25%),

linear-gradient(135deg, #34495e 25%, transparent 25%),

linear-gradient(-135deg, #34495e 25%, transparent 25%);

background-position: 10px 0, 10px 0, 0 0, 0 0;

background-size: 20px 20px;

box-shadow: 0 0 5px 0 #333333;

}

 

.logo {

position: absolute;

top: 10px;

left: 20px;

margin: 0;

}

 

.main-menu ul {

margin: 0;

margin-left: 130px;

padding: 0;

list-style: none;

}

 

.main-menu li {

display: inline-block;

margin-right: 1em;

}

 

.main-menu a {

color: white;

}

 

/* Main */

main {

display: block; /* для страховки, очень новый элемент */

min-height: 200px;

padding-top: 50px;

color: black;

background-color: white;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAABlBMVEX///+pqalTpKl9AAAAAnRSTlMAGovxNEIAAAAdSURBVDjLY2AAAUaG4UYxDDsfjfp91O+jfqfE7wCzpQCw/dq+qQAAAABJRU5ErkJggg==");

}

 

main::after {

content: "";

display: table;

clear: both;

}

 

.about-me {

min-height: 100px;

margin: 0 20px;

padding: 10px;

background-color: rgba(241, 196, 15, 0.1);

border-radius: 5px;

box-shadow: 0 0 3px #cccccc;

}

 

.posts {

min-height: 50px;

margin: 20px 0;

padding: 20px;

background: #f5f5f5;

box-shadow: 0 0 5px #cccccc;

}

 

/* Footer */

footer.page-footer {

min-height: 50px;

padding: 20px;

font-size: 14px;

color: black;

background-color: #f1c40f;

background-image:

linear-gradient(45deg, transparent 50%, white 50%),

linear-gradient(-45deg, transparent 50%, white 50%),

linear-gradient(135deg, transparent 50%, #2c3e50 50%),

linear-gradient(-135deg, transparent 50%, #2c3e50 50%);

background-repeat: repeat-x;

background-position: 0 0, 0 0, 0 100%, 0 100%;

background-size: 10px 12px;

}

 

.page-footer::after {

content: "";

display: table;

clear: both;

}

 

.page-footer.info {

float: left;

}

 

.page-footer.info img {

margin-right: 0.5em;

vertical-align: middle;

border: 2px solid white;

box-shadow: 0 0 4px #c0392b;

transform: rotate(-5deg);

}

 

.page-footer.copyright {

float: right;

padding-top: 20px;

font-size: 12px;

}

 

</style

</head>

<body>

<header class="page-header">

<div class="logo">

<img src="/assets/course73/logo.svg" width="90" height="90">

</div>

<nav class="main-menu">

<ul>

<li><a href="#home">Главная</a></li>

<li><a href="#blog">Посты</a></li>

<li><a href="#me">Обо мне</a></li>

</ul>

</nav>

</header>

<main>

<article class="about-me">

Обо мне

</article>

<section class="posts">

Последние посты

</section>

</main>

<footer class="page-footer">

<section class="info">

<img src="/assets/course73/keks.jpg" width="50">

Кекс, [e-mail]

</section>

<section class="copyright">

© 2008—2014 Cat Energy

</section>

</footer>

</body>

</html>

Курс «Знакомство с HTML5»

Использование нестандартных шрифтов [7/19]

Перед тем как продолжить работу над сайтом, давайте разберёмся со шрифтами.

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

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

Подобных сервисов с бесплатными шрифтами достаточно много. Один из самых известных — это Google Fonts. А вот похожий русскоязычный сервис: webfont.ru.

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

font-family: "PT Sans", "Arial", sans-serif;

Потренируемся подключать и использовать веб-шрифты.

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Использование нестандартных шрифтов</title>

<meta charset="utf-8">

 

<link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">

 

<style>

html,

body {

margin: 0;

padding: 0;

font-size: 100%;

color: white;

background-color: #2c3e50;

font-family: "PT Sans", "Arial", sans-serif;

}

 

/* Header */

header.page-header {

position: relative;

z-index: 5;

min-height: 20px;

padding: 20px;

color: white;

background-image:

linear-gradient(45deg, #34495e 25%, transparent 25%),

linear-gradient(-45deg, #34495e 25%, transparent 25%),

linear-gradient(135deg, #34495e 25%, transparent 25%),

linear-gradient(-135deg, #34495e 25%, transparent 25%);

background-position: 10px 0, 10px 0, 0 0, 0 0;

background-size: 20px 20px;

box-shadow: 0 0 5px 0 #333333;

}

 

.logo {

position: absolute;

top: 10px;

left: 20px;

margin: 0;

}

 

.main-menu ul {

margin: 0;

margin-left: 130px;

padding: 0;

list-style: none;

}

 

.main-menu li {

display: inline-block;

margin-right: 1em;

}

 

.main-menu a {

color: white;

}

 

/* Main */

main {

display: block; /* для страховки, очень новый элемент */

min-height: 200px;

padding-top: 50px;

color: black;

background-color: white;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAABlBMVEX///+pqalTpKl9AAAAAnRSTlMAGovxNEIAAAAdSURBVDjLY2AAAUaG4UYxDDsfjfp91O+jfqfE7wCzpQCw/dq+qQAAAABJRU5ErkJggg==");

}

 

main::after {

content: "";

display: table;

clear: both;

}

 

.about-me {

min-height: 100px;

margin: 0 20px;

padding: 10px;

background-color: rgba(241, 196, 15, 0.1);

border-radius: 5px;

box-shadow: 0 0 3px #cccccc;

}

 

.posts {

min-height: 50px;

margin: 20px 0;

padding: 20px;

background: #f5f5f5;

box-shadow: 0 0 5px #cccccc;

}

 

/* Footer */

footer.page-footer {

min-height: 50px;

padding: 20px;

font-size: 14px;

color: black;

background-color: #f1c40f;

background-image:

linear-gradient(45deg, transparent 50%, white 50%),

linear-gradient(-45deg, transparent 50%, white 50%),

linear-gradient(135deg, transparent 50%, #2c3e50 50%),

linear-gradient(-135deg, transparent 50%, #2c3e50 50%);

background-repeat: repeat-x;

background-position: 0 0, 0 0, 0 100%, 0 100%;

background-size: 10px 12px;

}

 

.page-footer::after {

content: "";

display: table;

clear: both;

}

 

.page-footer.info {

float: left;

}

 

.page-footer.info img {

margin-right: 0.5em;

vertical-align: middle;

border: 2px solid white;

box-shadow: 0 0 4px #c0392b;

transform: rotate(-5deg);

}

 

.page-footer.copyright {

float: right;

padding-top: 20px;

font-size: 12px;

}

 

</style>

 

</head>

<body>

<header class="page-header">

<div class="logo">

<img src="/assets/course73/logo.svg" width="90" height="90">

</div>

<nav class="main-menu">

<ul>

<li><a href="#home">Главная</a></li>

<li><a href="#blog">Посты</a></li>

<li><a href="#me">Обо мне</a></li>

</ul>

</nav>

</header>

<main>

<article class="about-me">

Обо мне

</article>

<section class="posts">

Последние посты

</section>

</main>

<footer class="page-footer">

<section class="info">

<img src="/assets/course73/keks.jpg" width="50">

Кекс, [e-mail]

</section>

<section class="copyright">

© 2008—2014 Cat Energy

</section>

</footer>

</body>

</html>

Курс «Знакомство с HTML5»

Подробнее о шрифтах. Правило @font-face [8/19]

Технически подключение веб-шрифтов производится с помощью CSS-правила @font-face. Читается как «эт-правило font-face». Вот пример:

@font-face { font-family: "Roboto"; src: local("Roboto Regular"), url("/assets/course73/roboto.woff") format("woff");}

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

Более подробно о технических тонкостях подключения шрифтов можно прочитать в серии статей на webfont.ru: первая часть и вторая часть.

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

1. Берут файл шрифта (например,.ttf) и конвертируют в веб-формат в сервисе наподобие Font Squirrel (для кириллических шрифтов надо указать дополнительные параметры конвертации).

2. Затем сконвертированные файлы шрифта размещают у себя на сервере.

3. И подключают шрифт с помощью @font-face.

Сейчас мы подключим шрифт, который расположен на сервере htmlacademy. Мы уже сконвертировали шрифт в веб-формат.

<!DOCTYPE html>

<html>

<head>

<title>Подробнее о шрифтах. Правило @font-face</title>

<meta charset="utf-8">

<!--link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"-->

 

<style>

@font-face {

font-family: "Roboto";

font-style: normal;

font-weight: 400;

src:

local("Roboto Regular"),

local("Roboto-Regular"),

url("/assets/course73/roboto.woff") format("woff");

}

html,

body {

margin: 0;

padding: 0;

font-size: 100%;

font-family: "PT Sans", "Arial", sans-serif; /* сменить на "Roboto" */

color: white;

background-color: #2c3e50;

font-family: "Roboto";

}

/* Header */

header.page-header {

position: relative;

z-index: 5;

min-height: 20px;

padding: 20px;

color: white;

background-image:

linear-gradient(45deg, #34495e 25%, transparent 25%),

linear-gradient(-45deg, #34495e 25%, transparent 25%),

linear-gradient(135deg, #34495e 25%, transparent 25%),

linear-gradient(-135deg, #34495e 25%, transparent 25%);

background-position: 10px 0, 10px 0, 0 0, 0 0;

background-size: 20px 20px;

box-shadow: 0 0 5px 0 #333333;

}

 

.logo {

position: absolute;

top: 10px;

left: 20px;

margin: 0;

}

 

.main-menu ul {

margin: 0;

margin-left: 130px;

padding: 0;

list-style: none;

}

 

.main-menu li {

display: inline-block;

margin-right: 1em;

}

 

.main-menu a {

color: white;

}

 

/* Main */

main {

display: block; /* для страховки, очень новый элемент */

min-height: 200px;

padding-top: 50px;

color: black;

background-color: white;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAABlBMVEX///+pqalTpKl9AAAAAnRSTlMAGovxNEIAAAAdSURBVDjLY2AAAUaG4UYxDDsfjfp91O+jfqfE7wCzpQCw/dq+qQAAAABJRU5ErkJggg==");

}

 

main::after {

content: "";

display: table;

clear: both;

}

 

.about-me {

min-height: 100px;

margin: 0 20px;

padding: 10px;

background-color: rgba(241, 196, 15, 0.1);

border-radius: 5px;

box-shadow: 0 0 3px #cccccc;

}

 

.posts {

min-height: 50px;

margin: 20px 0;

padding: 20px;

background: #f5f5f5;

box-shadow: 0 0 5px #cccccc;

}

 

/* Footer */

footer.page-footer {

min-height: 50px;

padding: 20px;

font-size: 14px;

color: black;

background-color: #f1c40f;

background-image:

linear-gradient(45deg, transparent 50%, white 50%),

linear-gradient(-45deg, transparent 50%, white 50%),

linear-gradient(135deg, transparent 50%, #2c3e50 50%),

linear-gradient(-135deg, transparent 50%, #2c3e50 50%);

background-repeat: repeat-x;

background-position: 0 0, 0 0, 0 100%, 0 100%;

background-size: 10px 12px;

}

 

.page-footer::after {

content: "";

display: table;

clear: both;

}

 

.page-footer.info {

float: left;

}

 

.page-footer.info img {

margin-right: 0.5em;

vertical-align: middle;

border: 2px solid white;

box-shadow: 0 0 4px #c0392b;

transform: rotate(-5deg);

}

 

.page-footer.copyright {

float: right;

padding-top: 20px;

font-size: 12px;

}

 

</style>

</head>

<body>

<header class="page-header">

<div class="logo">

<img src="/assets/course73/logo.svg" width="90" height="90">

</div>

<nav class="main-menu">

<ul>

<li><a href="#home">Главная</a></li>

<li><a href="#blog">Посты</a></li>

<li><a href="#me">Обо мне</a></li>

</ul>

</nav>

</header>

<main>

<article class="about-me">

Обо мне

</article>

<section class="posts">

Последние посты

</section>

</main>

<footer class="page-footer">

<section class="info">

<img src="/assets/course73/keks.jpg" width="50">

Кекс, [e-mail]

</section>

<section class="copyright">

© 2008—2014 Cat Energy

</section>

</footer>

</body>

</html>

Курс «Знакомство с HTML5»

Дополнительное содержание. Тег aside [9/19]

Теперь продолжим работу над страницей блога. Детальнее разметим раздел «Обо мне».

Этот раздел состоит из двух частей. В первой части будет содержаться основная информация, а во второй вспомогательная. Поэтому основную часть мы разметим с помощью уже знакомого <section>. А вторую часть разметим с помощью нового тега — <aside>.

<aside> — это дополнительное содержание, не связанное напрямую с основным. Ещё такие блоки часто называют «сайдбарами» или боковыми панелями.

И снова мы видим, как для общепринятого и часто используемого блока в HTML5 создали собственный элемент, немного расширив его значение и область применения.

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Дополнительное содержание. Тег aside</title>

<meta charset="utf-8">

<style>

@font-face {

font-weight: 400;

font-family: "Roboto";

font-style: normal;

src:

local("Roboto Regular"),

local("Roboto-Regular"),

url("/assets/course73/roboto.woff") format("woff");

}

 

html,

body {

margin: 0;

padding: 0;

font-size: 100%;

font-family: "Roboto", sans-serif;

color: white;

background-color: #2c3e50;

}

 

/* Header */

header.page-header {

position: relative;

z-index: 5;

min-height: 20px;

padding: 20px;

color: white;

 

bakground-image:

linear-gradient(45deg, #34495e 25%, transparent 25%),

linear-gradient(-45deg, #34495e 25%, transparent 25%),

linear-gradient(135deg, #34495e 25%, transparent 25%),

linear-gradient(-135deg, #34495e 25%, transparent 25%);

background-position: 10px 0, 10px 0, 0 0, 0 0;

background-size: 20px 20px;

box-shadow: 0 0 5px 0 #333333;

}

 

.logo {

position: absolute;

top: 10px;

left: 20px;

margin: 0;

}

 

.main-menu ul {

margin: 0;

margin-left: 130px;

padding: 0;

list-style: none;

}

 

.main-menu li {

display: inline-block;

margin-right: 1em;

}

 

.main-menu a {

color: white;

}

 

/* Main */

main {

display: block; /* для страховки, очень новый элемент */

min-height: 200px;

padding-top: 50px;

color: black;

background-color: white;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAABlBMVEX///+pqalTpKl9AAAAAnRSTlMAGovxNEIAAAAdSURBVDjLY2AAAUaG4UYxDDsfjfp91O+jfqfE7wCzpQCw/dq+qQAAAABJRU5ErkJggg==");

}

 

main::after {

content: "";

display: table;

clear: both;

}

 

.about-me {

min-height: 100px;

margin: 0 20px;

padding: 10px;

background-color: rgba(241, 196, 15, 0.1);

border-radius: 5px;

box-shadow: 0 0 3px #cccccc;

}

 

.about-me::after {

content: "";

display: table;

clear: both;

}

 

.profile {

float: left;

width: 51%;

min-height: 100px;

padding: 2%;

background-color: rgba(243, 156, 18, 0.1);

border-radius: 5px;

}

 

.last-actions {

float: right;

width: 40%;

min-height: 100px;

background: #f1c40f;

border: 5px solid white;

border-bottom-width: 15px;

box-shadow: 0 0 8px1px #f39c12;

}

 

.posts {

min-height: 50px;

margin: 20px 0;

padding: 20px;

background: #f5f5f5;

box-shadow: 0 0 5px #cccccc;

}

 

/* Footer */

footer.page-footer {

min-height: 50px;

padding: 20px;

font-size: 14px;

color: black;

background-color: #f1c40f;

background-image:

linear-gradient(45deg, transparent 50%, white 50%),

linear-gradient(-45deg, transparent 50%, white 50%),

linear-gradient(135deg, transparent 50%, #2c3e50 50%),

linear-gradient(-135deg, transparent 50%, #2c3e50 50%);

background-repeat: repeat-x;

background-position: 0 0, 0 0, 0 100%, 0 100%;

background-size: 10px 12px;

}

 

.page-footer::after {

content: "";

display: table;

clear: both;

}

 

.page-footer.info {