Занятие 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. Аналитика: предоставляет инструменты для анализа активности и взаимодействия с аудиторией.