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

Полное руководство по пользовательскому переключателю | Только 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