#13 Вёрстка сайта визитки для начинающих | HTML, CSS, JS - Прилипающая шапка, анимация и правки
В этом видео закончим стилизацию хедера. Сделаем небольшие правки, добавим иконку для кнопки домой, узнаем про якорные ссылки, реализуем прилипающую шапку и анимацию ввода текста! В общем, опробуем множество современных возможностей css3!
Подписывайтесь и ставьте лайк, приятного просмотра!
Также обязательно подпишись на мой телеграм канал, там будет много общения и ответов на вопросы!
------------------------------------------------
Ссылки:
Приоритет стилей:
GitHub:
GitHub Pages:
Тайминг:
00:00 - Введение
00:19 - Эффект наведения на пункты меню. Уникальный класс для ссылки
03:54 - Правки отступа и переводов
04:54 - Центрирование меню относительно страницы
07:49 - Универсальный класс для центрирования элементов
10:22 - svg иконка для кнопки домой
14:59 - Якорные ссылки
17:30 - Прилипающая шапка. Position sticky
21:14 - Подготовка к реализации эффекта печатающей машинки. display inline, inline-block, inline-flex
22:54 - Единица измерения ch. Свойство font-size и моноширинный шрифт
25:23 - Свойство letter-spacing - расстояние между символами
25:55 - Свойство white-space - управление пробелами в элементе
26:24 - Свойство overflow - управление видимостью внутри блока
27:26 - Описание реализации и логики эффекта печатающей машинки
29:01 - Единица измерения em - размер шрифта
30:10 - Анимации в css. Свойство animation, keyframes
31:54 - Свойство transform - трансформация элемента
32:18 - Создаём анимацию для ввода текста
35:26 - Создаём анимацию мигания курсора с исчезновением
38:49 - Сохраняем код в git и исправляем ширину в разных браузерах
Музыка:
Dead Pacman by N3rgul
Track: Home — Another Kid [Audio Library Release]
Music provided by Audio Library Plus
Watch:
Free Download / Stream:
Track: Midnight — Declan DP [Audio Library Release]
Music provided by Audio Library Plus
Watch:
Free Download / Stream:
------------------------------------------------
Привет! Меня зовут Виталий Шевчук, я веб-разработчик. Свой путь в разработке сайтов я начал ещё в школе, создавая форумы для игр. К текущему времени я получил много опыта в разработке сайтов и очень хочу им поделиться с вами!
------------------------------------------------
Telegram:
Сайт:
Теги: #html #html5 #верстка #css #css3 #css3tutorial
19 views
89
22
4 weeks ago 00:52:29 1
Мятеж Пригожина | Бунт, которого не было #минутавминуту (English subtitles) @Maxim_Katz
1 month ago 00:05:35 3
Laravel для новичков #13 - Активный пункт навигации