Accent-color - CSS свойство, которое не смогло 🙅🏻♂️.
В многих видео о свойстве accent-color, твердят, что это новый и легкий способ стилизации элементов формы: input type=”checkbox”, input type=”radio”, input type=”range”, progress в CSS. И нам можно забыть про трюки с тем чтобы прятать нативные элементы и вместо них отрисовывать кастомные на псевдоэлементах как мы это делали ранее в CSS.
Проведем полный разбор этого свойства и заглянем в различные браузеры. Посмотрим как оно сочетается с CSS color-scheme и @media (prefers-color-scheme: dark) и как это может сделать наш код доступней и приятней для пользователя.
Посмотрим как сделать другие элементы формы: button, fieldset, label, input type="text" в единой цветовой палитре сайта.
Вы увидите как переключить тему в Chrome - не меняя саму тему, чтобы увидеть разницу в примененном @media (prefers-color-scheme: dark).
Ссылки на ресурсы:
https://www.w3.org/TR/css-ui-4/#widge...,
https://accent-color.glitch.me/,
https://caniuse.com/?search=accent-color
0:00 accent-color - Основы
1:07 Chrome, Safari и Mozilla
1:41 Возможны значения
1:58 accent-color и светлый цвет
2:41 accent-color и цвета
3:50 Пользовательские темы
6:55 Chrome и смена темы
7:43 А как же другие элементы формы?
8:36 Итог
#css #html #web #webdevelopment #frontend #htmlcss #html5 #csshtml #css3html5 #css3code #css3tutorial #htmltutorial #htmlelements #css3 #csscourse #csstutorialscool #csstricks #csshovereffect #csshover #csshovereffects #webdev #cssanimation #csstransition #csstricks #htmlcss3 #fullstack #cssamazing #cssfeatures #csseasy #cssbasic #csslesson #csscourse #cssteach #javascript #vue #react #angular #svelte #vanillajs #js #animation #cssawesome #learncss #course #programming #crash_course #learning #fariga
Подписывайтесь на меня в соц. сетях:
👨💻 LinkedIn - / maksymfariga
📷 Instagram - / maksym_fariga (@maksym_fariga)
📖 Facebook - / maksymfariga
🐤 Twitter - / fariga_m
🛩 Telegram - https://t.me/web_education_new
CSS keywords: inherit, initial, unset, revert, all 👉 • CSS keywords: inherit, initial, unset... ✍️
CSS text-stroke, text-fill-color и paint-order 👉 • -webkit-text-stroke, -webkit-text-fil... ✍️
🥅 Не знаете, что такое пиксель или почему он не тот, за кого себя выдает? 👉 • А px, то не настоящий! PPI и DPI, DP... ✍️
🪃 Не знаете какие есть единицы для задания углов или когда и какие применять? 👉 • CSS Units: Deg, Rad, Grad, Turn . ✍️
📏 Абсолютные единицы измерения в CSS? 👉 • Нужны ли они нам? Абсолютные единицы ... . ✍️
📐 Относительные единицы измерения ex, ch, ic, lh 👉 • Зачем они были добавлены? CSS Units: ... ✍️
🔍 Не знаете что выбрать REM или EM 👉 • Вы точно не знаете зачем мы используе... ✍️
💻 Все про viewport, vh, vw, vmin, vmax 👉 • 😏 CSS Viewport Units: vw, vh, vmin, v... ✍️
Смотрите видео Accent-color - CSS свойство, которое не смогло 🙅🏻♂️. онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Maksym Fariga 13 Март 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 198 раз и оно понравилось 15 людям.