Занятие 1. Создание первой страницы
социальной сети
Для начала создадим папку нашего проекта. Открываем каталог расположения в программе
«AMPPS», далее – «www» и создаем папку «Social». ОткрываемVisual Studio в новой папке и
медленно, но уверенно приступаем к работе. Для начала обязательно создадим структуру
проекта – папки «js», «css», «img» и файл index.php для первой страницы (рисунок 1.1).
Рис. 1.1. Запуск программ и подготовка папки
В начале любой разработки необходимо «прикинуть» макет (возможно, зарисовать или
просто представить). В новом файле «index.php», воспользуйтесь шаблоном «html:5»,
пропишем следующий код и выведем только одно название социальной сети (название
можно задать индивидуально):
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Главная</title>
</head>
<body>
<div class="section-center">
<h1 class="mb-0">Социальная сеть с 0</h1>
</div>
</body>
</html>
Так как меню нашего сайта будет находиться на всех страницах, проще всего выделить его в
отдельный файл и просто подключать к разным страницам. Создадим новый файл
«menu.php» и подключим его в нашу главную страницу:
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Главная</title>
</head>
<body>
<?php
include("menu.php");
?>
<div class="section-center">
<h1 class="mb-0">Социальная сеть с 0</h1>
</div>
</body>
</html>
«Фишка» этой страницы будет заключаться именно в меню. Оно будет в свернутом состоянии
до тех пор, пока пользователь не активирует флаг, который будет замаскирован под иконкой
со стилями.
menu.php:
<input class="menu-icon" type="checkbox" id="menu-icon" name="menu-icon"/>
<label for="menu-icon"></label>
<nav class="nav">
<ul class="pt-5">
<li><a href="index.php">Главная</a></li>
<li><a href="#">Личный кабинет</a></li>
<li><a href="#">Чат</a></li>
<li><a href="#">Новости</a></li>
</ul>
</nav>
По итогу получилось следующее (рисунок 1.2):
На что способна
социальная сеть?
Рис. 1.2. Результат выполнения кода
Далее приступим к самому интересному – добавлению стилей. Стили мы также разделим на
«Главная страница» и «Меню». Создаем файлы каскадных стилей в папке «css» («style.css» и
«menu.css»), подключаем их к «index.php» и прописываем следующий код стилей (рисунок
1.3).
Рис. 1.3. Создание новых файлов
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/menu.css">
<title>Social</title>
</head>
<body>
<div class="section-center">
<h1 class="mb-0">Социальная сеть с 0</h1>
</div>
</body>
</html>
z-index – определяет порядок наложения элементов в трёхмерном пространстве
на веб-странице. Свойство управляет тем, как элементы перекрывают друг
друга, если они имеют позиционирование, отличное от значения static.
В CSS можно по-разному работать с настройками шрифта. Например: font: 300
15px/1.7;. Разберем значения часть за частью:
300 – это значение определяет жирность шрифта. Здесь 300 представляет собой
(light) (чуть тоньше обычного).
Название
font-weight
Thin / Hair
100
Extra Light
200
Light
300
Regular
400
Medium
500
Semi Bold
600
Bold
700
Extra Bold
800
Black / Heavy / Ultra
900
15px – это значение задает размер шрифта в пикселях. В данном случае размер
шрифта составляет 15 пикселей.
/ – разделяет размер шрифта и высоту строки (line height).
1.7 – это значение устанавливает высоту строки (line height) для текста. В
данном случае высота строки составляет 1.7, это означает, что промежуток
между линиями текста будет равен 1.7 разам размера шрифта.
style.css:
body {
font: 300 15px/1.7 'Montserrat', sans-serif; /* Установка шрифта, размера и
линейного интервала */
color: #eeeeec; /* Цвет текста */
background: #FFC000;
overflow: hidden; /* Скрытие содержимого, выходящего за границы элемента */
height: 100vh; /* Высота 100% высоты видимой области */
width: 100%; /* Ширина 100% ширины видимой области */
}
/* Стили для центрированного блока */
.section-center {
position: absolute; /* Позиционирование абсолютно */
top: 50%; /* Расположение по вертикали на 50% относительно родительского
элемента */
left: 0; /* Расположение слева на 0 */
display: block; /* Отображение как блочный элемент */
width: 100%; /* Ширина 100% ширины родительского элемента */
padding: 0; /* Внутренний отступ 0 */
margin: 0; /* Внешний отступ 0 */
z-index: 6; /* Позиционирование по оси Z */
text-align: center; /* Выравнивание текста по центру */
transform: translateY(-50%); /* Смещение по вертикали на -50% от собственной
высоты */
}
/* Стили для заголовка */
h1 {
font: 800 7vw/1 'Montserrat', sans-serif; /* Установка шрифта, размера,
жирности и линейного интервала */
color: #ffeba7; /* Цвет текста */
text-align: center; /* Выравнивание текста по центру */
-webkit-text-stroke: 5px #C00000; /* Обводка текста */
-webkit-text-fill-color: transparent; /* Заполнение текста прозрачным цветом
*/
}
Получившаяся страница выглядит следующим образом (рисунок 1.4):
Рис. 1.4. Стили главной страницы
Теперь перейдем к самому интересному – стили для меню. Будем прописывать понемногу,
чтобы можно было разбить код на части и разобраться во всем. Для начала поработаем с
«флагом»:
menu.css:
/* Стили для чекбокса (невидимого) */
[type="checkbox"]:checked, [type="checkbox"]:not(:checked) {
position: absolute; /* Позиционирование абсолютно */
left: -9999px;
области */
}
/* Смещение влево на большое расстояние за пределы видимой
[type="checkbox"]:checked: выбираем чекбоксы, которые находятся в состоянии "checked"
(выбранные пользователем).
[type="checkbox"]:not(:checked): выбираем чекбоксы, которые не находятся в состоянии
"checked" (невыбранные пользователем).
position: absolute; устанавливает позицию элемента в абсолютных координатах, что
позволяет полностью управлять его местоположением на странице.
left: -9999px; смещение элемента влево на очень большое расстояние (-9999px), за пределы
видимой области экрана. Это эффективный метод "скрытия" элемента, при этом его
доступность и функциональность сохраняются.
Далее обратимся к <label>, который идет сразу после нашего скрытого чекбокса, этот тег у
нас будет выступать в качестве иконки для открытия меню. Обращаться к нему мы будем
необычным способом, + label (т. е. label, который следует за чекбоксом). Далее с помощью
псевдоэлементов :before и :after начнем обрисовывать иконку. Идея следующая – мы должны
нарисовать 3 полоски, которые при нажатии будут складываться в одну, далее 2 линии
переворачиваются в разные стороны на 45 градусов и образуют «X» для закрытия меню и
возвращения иконки в первоначальное состояние. Для начала создадим 2 линии и пропишем
для них анимацию возвращения в изначальное положение.
Подробнее поговорим про transition :
cubic-bezier – это функция в CSS, которая определяет форму кривой времени
(easing curve) для анимации. Кривая времени определяет, как анимация
изменяет свою скорость во времени. Функция cubic-bezier принимает четыре
числа (числа, которые лежат в диапазоне от 0 до 1), которые описывают
изменение скорости анимации.
cubic-bezier(0.25, 0.1, 0.25, 1): ускорение и замедление в середине анимации.
cubic-bezier(0.42, 0, 1, 1): быстрое начало, затем – постепенное замедление.
cubic-bezier(0, 0, 0.58, 1): плавное начало, затем – быстрое замедление.
1. border-width 100ms 1500ms ease: определяет анимацию для изменения ширины
границы (border-width). Изменения будут происходить за 100 миллисекунд с
задержкой в 1500 миллисекунд с использованием функции плавности ease.
2. top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1): устанавливает анимацию для
изменения верхнего положения (top). Изменения будут происходить за 100
миллисекунд с задержкой в 1600 миллисекунд с использованием кривой времени
cubic-bezier(0.23, 1, 0.32, 1).
3. height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1): устанавливает анимацию для
изменения высоты (height). Изменения будут происходить за 100 миллисекунд с
задержкой в 1600 миллисекунд с использованием той же кривой времени.
4. background-color 200ms ease: устанавливает анимацию для изменения цвета фона
(background-color). Изменения будут происходить за 200 миллисекунд с
использованием функции плавности ease.
5. transform 200ms cubic-bezier(0.23, 1, 0.32, 1): определяет анимацию для свойства
трансформации (transform). Все изменения будут происходить за 200 миллисекунд с
использованием нашей кривой времени.
menu.css:
/* Стили для иконки меню */
.menu-icon:checked + label, .menu-icon:not(:checked) + label {
position: fixed; /* Позиционирование фиксировано */
top: 63px; /* Расположение по вертикали на 63px от верхней границы */
right: 75px; /* Расположение справа на 75px от правой границы */
display: block; /* Отображение как блочный элемент */
width: 30px; /* Ширина 30px */
height: 30px; /* Высота 30px */
padding: 0; /* Внутренний отступ 0 */
margin: 0; /* Внешний отступ 0 */
cursor: pointer; /* Изменение формы указателя при наведении */
z-index: 10; /* Позиционирование по оси Z */
}
/* Стили для линий иконки меню */
.menu-icon:checked + label:before, .menu-icon:not(:checked) + label:before {
position: absolute; /* Позиционирование абсолютно */
content: ''; /* Пустое содержимое (линии иконки) */
display: block; /* Отображение как блочный элемент */
width: 30px; /* Ширина 30px */
height: 20px; /* Высота 20px */
z-index: 20; /* Позиционирование по оси Z */
top: 0; /* Расположение по вертикали на 0 */
left: 0; /* Расположение слева на 0 */
border-top: 2px solid #ececee; /* Верхняя граница 2px, сплошная линия,
цвет #ececee */
border-bottom: 2px solid #ececee; /* Нижняя граница 2px, сплошная линия,
цвет #ececee */
transition: border-width 100ms 1500ms ease, top 100ms 1600ms cubicbezier(0.23, 1, 0.32, 1), height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1),
background-color 200ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32,
1) ; /* Анимация изменения свойств с заданными параметрами */
}
Мы получили первую заготовку для иконки, но, к сожалению, пока описанную анимацию не
видно, так как мы еще не возвращаем иконку в первоначальное состояние (мы не описали
складывание линий) (рисунок 1.5):
Рис. 1.5. Заготовка для запуска меню
Продолжаем описание нашей иконки: теперь добавим еще одну линию внутрь нашего label.
Заполним поле пустым значением и превратим его в линию, опишем для новой линии
анимацию:
menu.css:
/* Стили для креста иконки меню */
.menu-icon:checked + label:after, .menu-icon:not(:checked) + label:after {
position: absolute; /* Позиционирование абсолютно */
content: ''; /* Пустое содержимое (крест иконки) */
display: block; /* Отображение как блочный элемент */
width: 22px; /* Ширина 22px */
height: 2px; /* Высота 2px */
z-index: 20; /* Позиционирование по оси Z */
top: 10px; /* Расположение по вертикали на 10px */
right: 4px; /* Расположение справа на 4px */
background-color: #ececee; /* Цвет фона #ececee */
margin-top: -1px; /* Внешний отступ сверху на -1px */
transition: width 100ms 1750ms ease, right 100ms 1750ms ease, margin-top
100ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); /* Анимация
изменения свойств с заданными параметрами */
}
Остался последний штрих – это складывание 3 полос и превращение двух из них в «X» путем
поворота линий на 45 градусов. Сразу опишем обратное поведение:
menu.css:
/* Анимация для изменения вида линий иконки меню при активации */
.menu-icon:checked + label:before {
top: 10px; /* Расположение по вертикали на 10px */
transform: rotate(45deg); /* Поворот на 45 градусов */
height: 2px; /* Высота 2px */
background-color: #ececee; /* Цвет фона #ececee */
border-width: 0; /* Ширина границы 0 */
transition: border-width 100ms 340ms ease, top 100ms 300ms cubicbezier(0.23, 1, 0.32, 1), height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
background-color 200ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1,
0.32, 1); /* Анимация изменения свойств с заданными параметрами */
}
/* Иконка "X" для закрытия меню */
.menu-icon:checked + label:after {
width: 30px; /* Ширина 30px */
margin-top: 0; /* Внешний отступ сверху 0 */
right: 0; /* Расположение справа на 0 */
transform: rotate(-45deg); /* Поворот на -45 градусов */
transition: width 100ms ease, right 100ms ease, margin-top 100ms 500ms
ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); /* Анимация
изменения свойств с заданными параметрами */
}
Супер! Теперь откроем страницу и опробуем анимацию нажатием на нашу иконку (рисунок
1.6):
Рис. 1.6. Стили главной страницы
Это нужно запомнить
z-index – определяет порядок наложения элементов в
трёхмерном пространстве на веб-странице. Свойство управляет
тем, как элементы перекрывают друг друга, если они имеют
позиционирование, отличное от значения static.
В CSS можно по-разному работать с настройками шрифта.
Например: font: 300 15px/1.7;. Разберем значения часть за частью:
300 – это значение определяет жирность шрифта. Здесь 300
представляет собой (light) (чуть тоньше обычного).
Название
font-weight
Thin / Hair
100
Extra Light
200
Light
300
Regular
400
Medium
500
Semi Bold
600
Bold
700
Extra Bold
800
Black / Heavy / Ultra
900
15px – это значение задает размер шрифта в пикселях. В данном
случае размер шрифта составляет 15 пикселей.
/ – разделяет размер шрифта и высоту строки (line height).
1.7 – это значение устанавливает высоту строки (line height) для
текста. В данном случае высота строки составляет 1.7, это
означает, что промежуток между линиями текста будет равен 1.7
разам размера шрифта.
cubic-bezier – это функция в CSS, которая определяет форму
кривой времени (easing curve) для анимации. Кривая времени
определяет, как анимация изменяет свою скорость во времени.
Функция cubic-bezier принимает четыре числа (числа, которые
лежат в диапазоне от 0 до 1), которые описывают изменение
скорости анимации.
cubic-bezier(0.25, 0.1, 0.25, 1): ускорение и замедление в середине
анимации.
cubic-bezier(0.42, 0, 1, 1): быстрое начало, затем – постепенное
замедление.
cubic-bezier(0, 0, 0.58, 1): плавное начало, затем – быстрое
замедление.
Контрольные вопросы
1. Какое свойство в CSS используется для управления толщиной шрифта?
2. Какое свойство CSS позволяет управлять порядком слоев элементов на вебстранице?
3. Какое CSS-свойство задает функцию, описывающую кривую плавности анимации?
4. Какое название у font-weight со значением 700?
На что способна социальная сеть?
5.
1. Общение: позволяет людям обмениваться сообщениями, изображениями и
видео, независимо от расстояния.
2. Социализация: создаёт виртуальные сообщества, где люди с общими
интересами могут взаимодействовать.
3. Информационный обмен: служит источником новостей, позволяет узнать
о событиях в мире.
4. Продвижение и реклама: предоставляет платформу для бизнесов и
личных брендов для продвижения и рекламы.
5. Обучение: предоставляет доступ к образовательным ресурсам и
сообществам для обмена знаниями.
6. Развлечения: содержит различные развлекательные материалы, включая
игры, видео и кураторский контент.
7. Совместная работа: обеспечивает средства для совместной работы и
обмена документами.
8. Мобильность: даёт возможность взаимодействия с платформой с помощью
мобильных устройств, обеспечивая доступность информации в любом
месте.
9. Аналитика: предоставляет инструменты для анализа активности и
взаимодействия с аудиторией.
