Полное руководство по пользовательскому переключателю | Только HTML и CSS
Автор: Angela Design
Загружено: 2020-05-11
Просмотров: 3800
Урок по созданию значка закрытия меню «гамбургер»:
• Hamburger Menu to Close Icon | CSS Animation
Новичок в CSS Grid? Посмотрите полный Crash Course здесь: • CSS Grid Crash Course | Beginners Tutorial
В этом видео я расскажу, как создать собственный переключатель, используя только HTML и CSS. Я покажу вам полный урок по кодированию front-end, где я создаю структуру элементов в HTML, а затем прописываю все стили и эффекты с помощью CSS. Я изменяю метку флажка, чтобы создать переключатель, а затем использую псевдоэлементы для значков. Я добавляю CSS-переходы для создания анимированного взаимодействия.
Примечание: Изначально я создал эту реализацию, используя элемент «i» под тегом label. После некоторых итераций я решил использовать псевдоэлементы ::before и ::after. Поэтому в HTML-коде теги «i» могут быть видны в уроке, но в финальной реализации я их не использовал. Эти теги можно игнорировать при создании этого эффекта.
Codepen: https://codepen.io/angeladelise/pen/M...
В этом видео я покажу вам:
0:29 — Начальный HTML-код
0:52 — HTML-код
2:49 — CSS-код
2:20 — CSS-код панели навигации
3:24 — Как оформить контейнер переключателя
4:30 — Как оформить метку
5:53 — Как добавить псевдоэлементы со значком
8:31 — Как изменить состояние с помощью :checked
10:13 — Как добавить эффекты анимации CSS
12:31 — Как добавить цветовой переход
Хотите улучшить процесс передачи данных от дизайнера к разработке? Посмотрите мой рабочий процесс Sketch в Zeplin здесь: https://www.youtube.com/watch?v=D3ZF2...
#cssanimation #customanimation #pseudoelements
Давайте общаться
Dribbble: https://dribbble.com/angeladelise
Блог: / angeladelise
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке: