Дизайнер 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 - Заключение, анонс следующих видео цикла...