Полное руководство по пользовательскому переключателю | Только HTML и CSS

Урок по созданию значка закрытия меню «гамбургер»:

   • 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