Дизайнер vs Программист: верстка модного переключателя

✏️ Показываю свёрстанный по уму модный переключатель дневной и ночной темы из оригинального видео "Дизайнер VS Программист" и рассказываю о тонкостях реализации.
В следующем видео цикла почитаем комментарии под оригинальным видео, похихикаем над "специалистами", а в заключительном видео подробно поговорим о цифровой доступности таких переключателей. :)

🔥 Посмотреть результат в браузере: https://morevm.github.io/creative-the...

🔴 Таймлайн:
▶ 00:00 - Вступление
▶ 01:35 - Демонстрация результата
▶ 02:11 - Состояния элемента
▶ 02:42 - О состояние :hover
▶ 03:58 - О состояние :active
▶ 05:05 - О состояние :focus-visible
▶ 06:29 - О заметности :focus-visible, смотрим Маркет
▶ 09:02 - Состояние :focus-visible непосредственно переключателя
▶ 09:57 - О длительности анимации
▶ 12:08 - О перетаскивании переключателя (не только нажатие!)
▶ 13:15 - Начинаем разбирать разметку
▶ 13:42 - Пара слов о доступности, анонс следующего ролика
▶ 16:02 - Пара слов об SVG-графике, анонс следующего ролика
▶ 17:30 - О производительности разметки, количество DOM-узлов
▶ 18:50 - Смотрим CSS, показываю концепт работы с состояниями
▶ 19:50 - О динамическом размере элементов и отступов, немного о нейминге
▶ 22:30 - Об "управляющих" переменных
▶ 23:35 - Стили самого элемента, косяк рендеринга
▶ 24:35 - Применение color-mix
▶ 25:34 - Немного о clip-path
▶ 26:21 - О множественных радиальных градиентов для производительности и удобства
▶ 26:42 - О функциях в CSS :(
▶ 27:32 - Об оверсайзе облаков
▶ 30:02 - Итоги на текущий момент
▶ 30:40 - Заключение, анонс следующих видео цикла


📚 Ссылки из видео:
〰️ Видео с отрисовкой элемента:    • Дизайнер VS Программист: рисуем навор...  
〰️ Figma-файл с исходником: https://drive.google.com/file/d/17NbI...
〰️ Живое демо с переключателем: https://morevm.github.io/creative-the...
〰️ И его репозиторий: https://github.com/MorevM/creative-th...
〰️ Личный сайт Анатолия Попко: http://adpopko.ru/
〰️ Определить размер элемента на чистом CSS: https://frontendmasters.com/blog/how-...
〰️ Библиотека миксинов more-sass: https://morevm.github.io/more-sass/
〰️ Функции и стили в CSS: https://css.oddbird.net/sasslike/mixi...
〰️ Примеры аналогичных переключателей:
https://codepen.io/rtredes2/pen/rNPWXXe
https://codepen.io/jh3y/pen/LYgjpYZ
〰️ О доступности переключателей:
https://adrianroselli.com/2019/03/und...
https://adrianroselli.com/2019/08/und...


👨💻Автор:
〰️ Github: https://github.com/MorevM
〰️ Telegram-канал: https://t.me/morev_online
〰️ Личный telegram: https://t.me/max_seainside
〰️ Оборудование: https://github.com/MorevM/use/

---

Music I Use: Bensound.com/royalty-free-music
License code: EA0FPGQNRJ1T3PXB