✏️ Показываю свёрстанный по уму модный переключатель дневной и ночной темы из оригинального видео "Дизайнер VS Программист" и рассказываю о тонкостях реализации.
В следующем видео цикла почитаем комментарии под оригинальным видео, похихикаем над "специалистами", а в заключительном видео подробно поговорим о цифровой доступности таких переключателей. :)
🔥 Посмотреть результат в браузере: https://morevm.github.io/creative-theme-switcher/
🔴 Таймлайн:
▶ 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 - Заключение, анонс следующих видео цикла
📚 Ссылки из видео:
〰️ Видео с отрисовкой элемента: https://www.youtube.com/watch?v=1gkJsxJgFaI
〰️ Figma-файл с исходником: https://drive.google.com/file/d/17NbIcF0akQyo3Z342m7ME9YpCKQ0jXzf/view
〰️ Живое демо с переключателем: https://morevm.github.io/creative-theme-switcher/
〰️ И его репозиторий: https://github.com/MorevM/creative-theme-switcher
〰️ Личный сайт Анатолия Попко: http://adpopko.ru/
〰️ Определить размер элемента на чистом CSS: https://frontendmasters.com/blog/how-to-get-the-width-height-of-any-element-in-only-css/
〰️ Библиотека миксинов more-sass: https://morevm.github.io/more-sass/
〰️ Функции и стили в CSS: https://css.oddbird.net/sasslike/mixins-functions/
〰️ Примеры аналогичных переключателей:
- https://codepen.io/rtredes2/pen/rNPWXXe
- https://codepen.io/jh3y/pen/LYgjpYZ
〰️ О доступности переключателей:
- https://adrianroselli.com/2019/03/under-engineered-toggles.html
- https://adrianroselli.com/2019/08/under-engineered-toggles-too.html
👨💻Автор:
〰️ Github: https://github.com/MorevM
〰️ Telegram: https://t.me/max_seainside
---
Music I Use: Bensound.com/royalty-free-music
License code: EA0FPGQNRJ1T3PXB