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

Показываю свёрстанный по уму модный переключатель дневной и ночной темы из оригинального видео "Дизайнер VS Программист" и рассказываю о тонкостях реализации. В следующем видео цикла почитаем комментарии под оригинальным видео, похихикаем над "специалистами", а в заключительном видео подробно поговорим о цифровой доступности таких переключателей. :) Посмотреть результат в браузере:
Таймлайн: 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-файл с исходником:
Живое демо с переключателем:
И его репозиторий:
Личный сайт Анатолия Попко:
Определить размер элемента на чистом CSS:
Библиотека миксинов more-sass:
Функции и стили в CSS:
Примеры аналогичных переключателей:

О доступности переключателей:

Автор: Github:
Telegram:
--- Music I Use: Bensound.com/royalty-free-music License code: EA0FPGQNRJ1T3PXB