Анна, я просто не перестаю удивляться тому потоку информации, который получаю с вашего канала. Ваши гайды по фронт-энду и новых фишек, о которых я даже не знал заставляют таких менее опытных людей, как я, расти в этой области. Спасибо вам огромное за ваш труд и желание делиться информацией с другими людьми! Вот вам от меня пятюня
Не поставить лайк под этим видео совершено невозможно. Через 5 минут рука самопроизвольно тянется к кнопке подписки, а сейчас с трудом себя сдерживаю, чтоб не сделать предложение :).
т.к. я занимаюсь системным программированием и к фронту имею ровно никакое отношение, то могу просто отметить что Вы выглядите просто замечательно и вас очень приятно слушать!
Еще интересно будет услышать про цветовые темы в фавиконках и собственно о создании темных стилей для сайта - что стоит менять, что не стоит, как не испортить доступность-удобность.
Очень интересное и полезное видео, ведь использование переменных в CSS открывает нам возможность создания и применения тем на веб-странице. Спасибо за видео!
спасибо за такой прекрасный видеообзор мне понравился для себя кое что полезное спасибо большое этому каналу который очень полезным побольше бы таких мне лайк и подписка
Из опыта, на проектах дизайнеры все равно для всего и для фона и для бордеров поставят свои цвета, а чекбоксы вообще будут кастомные, так что переопределять придется Только для мини проектов на показ годится
Поддерживаю. Также крайне удобно для цветовой темы использовать data-atribute. Например "data-colorScheme=dark" Если на проекте семантические цвета, то все цвета представляются в виде CSS переменных и потом CSS переменные оборачиваются в SASS переменные для удобства. И дальше в css файле делается вот так: [colorScheme=dark]: {--main: #000;} [colorScheme=light]: {--main: #fff;}, где мы переопределяем CSS переменные Если на проекте не семантические цвета и темную тему завезли позже, то можно сделать так, чтобы data-atribute был только когда есть темная тема. И дальше мы пользуемся тем, что у функции "var()" 2 аргумента: если указанной переменной не существует, то берется резервное значение. И мы делаем что-то типо такого: "background: var(--black, white)". Т.е. если темная тема есть, то у нас будет существовать --black и будет черный фон. Если темы нету, то переменная пропустится и будет белый фон. ...Ну а вообще в современных проектах зачастую CSS-in-JS и это уже другая история
Для решения многих проблем , возникающих у меня в процессе работы на компьютере , мне частенько приходится обращаться к дочери , а это зачастую очень неудобно . Ваш ролик поможет мне для решения вопросов . Спасибо и лайк .
Конечно. Цель видео была показать, как работать со стилями. Если дальше углубляться, то по хорошему еще бы сохранять выбранную тему на стороне пользователя.
Интересное, но редко применяемое свойство. Очень редко захотят использовать такой кислотный черный. Надо что-то помягче для глаз. И по хорошему надо было рассказать и про prefers-color-scheme.
Вообще круто! Но вот с bootstrap облом ((( Если подключен bootstrap.min.css, то эта штука не срабатывает, или я что-то делаю не так. А если нет bootstrap, то срабатывает, спасибо за супер мега лайф хак инфу
Я до самого конца не понимал, как его использовать. Честно говоря, я для переключения темы всегда создавал 3 css файла (2 с переменными и 1 со стилем страницы), и просто менял свойство href тега link, к которому я привязал id
Вообще то я привыкший переключать тему врукопашку и потому использование медиазапроса стало небольшой неожиданностью. В общем решение и так понятное. Я бы сделал немного по другому, но тоже коротко.
Если основной плюс этого подхода в том, что браузер сам допридумывает некоторые цвета, то какой от этого толк, если есть готовый дизайн, и все цвета должны соответствовать макету.
На мой взгляд, это можно использовать, как готовое решение, если дизайнер не участвует в проекте. К тому же, порой, какие-то моменты могут быть упущено и это свойство временно может спасти.
✨ Поддержать выход нового полезного контента можно на Boosty: boosty.to/annblok
Анна, я просто не перестаю удивляться тому потоку информации, который получаю с вашего канала. Ваши гайды по фронт-энду и новых фишек, о которых я даже не знал заставляют таких менее опытных людей, как я, расти в этой области. Спасибо вам огромное за ваш труд и желание делиться информацией с другими людьми! Вот вам от меня пятюня
❤
Я не знал такого. Переписывал все цаета лоя темной темы.
Анюта, ты умничка! Спасибо!
Спасибо. )) Эта тема меня интересовала.
Ваше видео будет необычайно полезно для многих из нас! Новые технологии не всегда удается проследить!
Очень четко, без лишней воды и понятно все объяснили. Огромное спасибо, что помогаете людям подобными видео.
Крутой ролик, очень полезная информация. Я хоть и ударился в back-end но скиллы по верстке терять нельзя)). Спасибо😎👍
Правильно! 😎
Я наоборот понял что недостаточно знаю фронт.
Не поставить лайк под этим видео совершено невозможно. Через 5 минут рука самопроизвольно тянется к кнопке подписки, а сейчас с трудом себя сдерживаю, чтоб не сделать предложение :).
Интеграция с вк, уровень👍
отличный механизм для применения. спасибо
Честно говоря я и незнал об этой функции, спасибо за обзор.
Полезное видео, для тех, кто интересуется этой темой!!!
т.к. я занимаюсь системным программированием и к фронту имею ровно никакое отношение, то могу просто отметить что Вы выглядите просто замечательно и вас очень приятно слушать!
Хорошее обучающее видео, кстати давно искал как писать скрипты, и вот наконец-то вы меня порадовали. Спасибо!
Спасибо за подробные советы этой нелёгкой темы!
Я искала как же это можно сделать, и вы мне помогли, теперь я знаю как можно сменить цветовую схему😍👍 Спасибо)
Как всегда с новинками и полезной, а главным бесплатной и такой нужной информацией
Вообще, это уже должны знать все, но такой новичек, как я, узнал об этой смене тем, только что от вас.
Еще интересно будет услышать про цветовые темы в фавиконках и собственно о создании темных стилей для сайта - что стоит менять, что не стоит, как не испортить доступность-удобность.
Вообще бомба, даже не знал про такую возможность ❤, Как дурачок все стили сам адаптировал на темную тему😅
Главное, что теперь знаете, как надо 👍
Очень четко и понятно все объяснили, огромное спасибо, что помогли разобраться с версткой тем
максимально подробно и наглядно все объяснили , большое спасибо
спасибо, что рассказали нам о том как легко можно поменять светлую и темную темы, эта информация действительно может пригодиться
Очень интересное и полезное видео, ведь использование переменных в CSS открывает нам возможность создания и применения тем на веб-странице. Спасибо за видео!
неплохое видео про верстку светлой или темной темы.нужный контент
Понятно и просто всё объяснили , видео получилось информативным и полезным.
Спасибо вы мне очень помогли мало кто сейчас говорит об этом
Объяснили очень грамотно, думаю если следовать инструкциям все получиться, ну может не с первого раза.
очень полезная информация, легко и просто все рассказано)
Да, интересно получается, мне нравится такой подход.
Вы очень легко и четко обьяснили🙏🏻🙏🏻🙏🏻
Да иногда возникал такой вопрос, благодаря вам теперь в курсе как это сделать💯👍
Паралельно занимаюсь и через ваши советы плюс на стороне есть условия
Только упорство в этом деле даст результат, и ты будешь себя чувствовать как спец
спасибо за такой прекрасный видеообзор мне понравился для себя кое что полезное спасибо большое этому каналу который очень полезным побольше бы таких мне лайк и подписка
Отличная информация для тех кто интересуется данной темой
Из опыта, на проектах дизайнеры все равно для всего и для фона и для бордеров поставят свои цвета, а чекбоксы вообще будут кастомные, так что переопределять придется
Только для мини проектов на показ годится
Поддерживаю.
Также крайне удобно для цветовой темы использовать data-atribute. Например "data-colorScheme=dark"
Если на проекте семантические цвета, то все цвета представляются в виде CSS переменных и потом CSS переменные оборачиваются в SASS переменные для удобства.
И дальше в css файле делается вот так: [colorScheme=dark]: {--main: #000;} [colorScheme=light]: {--main: #fff;}, где мы переопределяем CSS переменные
Если на проекте не семантические цвета и темную тему завезли позже, то можно сделать так, чтобы data-atribute был только когда есть темная тема.
И дальше мы пользуемся тем, что у функции "var()" 2 аргумента: если указанной переменной не существует, то берется резервное значение. И мы делаем что-то типо такого:
"background: var(--black, white)". Т.е. если темная тема есть, то у нас будет существовать --black и будет черный фон. Если темы нету, то переменная пропустится и будет белый фон.
...Ну а вообще в современных проектах зачастую CSS-in-JS и это уже другая история
довольно таки полезная информация у вас на канале
Для решения многих проблем , возникающих у меня в процессе работы на компьютере , мне частенько приходится обращаться к дочери , а это зачастую очень неудобно . Ваш ролик поможет мне для решения вопросов . Спасибо и лайк .
Полностью с вами согласна. Тоже люблю во всем разбираться сама, но не всегда получается. А с помощью этого канала, намного проще.
Хорошая возможность для смены темы в цветовом оформлении
о! color-scheme! Давно её ждали! Раньше приходилось писать кучу css, чтобы сделать это =)
Но я бы использовал hsl - кода было бы меньше
Супер!
Nützliches Video für diejenigen, die sich für dieses Thema interessieren!!!
эта информация действительно может пригодиться...
Добрый день, подскажите мне как новичку в этой сфере, стоит ли сразу изучать бинарные массивы, или можно отложить их на потом?
Любопытно узнать, как сейчас обстоят дела с искусственным интеллектом по поводу верстки и изменения цветовых стилей.
Молодец, полезно 👍
Можно для html с классом dark переопределить переменные, не вижу принципиальной разницы
Очень полезно, спасибо) Однако, я так понимаю при перезагрузке страницы все слетит без localStorage?
Конечно. Цель видео была показать, как работать со стилями. Если дальше углубляться, то по хорошему еще бы сохранять выбранную тему на стороне пользователя.
Интересное, но редко применяемое свойство. Очень редко захотят использовать такой кислотный черный. Надо что-то помягче для глаз. И по хорошему надо было рассказать и про prefers-color-scheme.
А как получить в js со стороны пользователя true / false в зависимости от его световой темы?
Анна класс👌
Спасибо за видео. Но можете ещё рассказать про значения этого свойства как: only light/dark и про тип dark light?
Да, расскажу
@@annblok_webdev спасибо
Да, тут слов нет, как выразить восторг этой качественной верстке светлой и тёмной темы без лишних стилей в CSS из-за color-scheme
Не знал о таком. Я как-то верстал темную-светлую тему и намучался под каждый тег подгонять свой цвет. Зря раньше видео не выпустила 🤣
Упс 😅
Привет, думаешь так вообще корректно делать? if (button.textContent === "Перейти на темную тему")
Разве не нужно в колбек функцию аргументом передавать event, что бы потом к нему обратиться?
Супер. Но есть нюанс. Добавь, пжл, код, чтобы при обновлении страницы тема не слетала, а оставалась такой, какую выбрал пользовтель.
Использование переменных в CSS открывает нам возможность создания и применения тем на веб-странице.
прикольный видео урок
сделайте по возможности по JavaScript подробный курс
бесплатный
Вообще круто! Но вот с bootstrap облом ((( Если подключен bootstrap.min.css, то эта штука не срабатывает, или я что-то делаю не так. А если нет bootstrap, то срабатывает, спасибо за супер мега лайф хак инфу
Можно сделать, чтоб на сайте быд тип схемы выставненный в винде :)
Приходится быть на чеку и учиться на ходу чего не знал раньше
почему сначала к кнопке обращаемся через button, который получили из querySelector, а потом прямо по id themeToggle ?
По невнимательности. Так действительно было бы логичнее сделать) Пример в демке поправила.
Я до самого конца не понимал, как его использовать. Честно говоря, я для переключения темы всегда создавал 3 css файла (2 с переменными и 1 со стилем страницы), и просто менял свойство href тега link, к которому я привязал id
Идея для обложки видео - ангелок или демон)
Всегда благодарен людям которые делают обучающие ролики, экономят наша время и нежалеют свое!
Экономят? Этот ролик можно было в шортсы запихнуть, а не растягивать на 12 минут ))
Вообще то я привыкший переключать тему врукопашку и потому использование медиазапроса стало небольшой неожиданностью. В общем решение и так понятное. Я бы сделал немного по другому, но тоже коротко.
Только начинаю свой путь во фронте и задумываюсь,а надо ли уже учить версту,если есть ии ....?
Лучшая
Хороший контент но это наверное для веб дизайна больше подходит.
Круто, оказывается в css переменные завезли
Они там и были, просто ты наверное не плотно изучал его и не знал об этом😊
Сейчас почти на каждом сайте такое есть.
Если основной плюс этого подхода в том, что браузер сам допридумывает некоторые цвета, то какой от этого толк, если есть готовый дизайн, и все цвета должны соответствовать макету.
На мой взгляд, это можно использовать, как готовое решение, если дизайнер не участвует в проекте. К тому же, порой, какие-то моменты могут быть упущено и это свойство временно может спасти.
@@annblok_webdev эх, где б найти проекты без дизайнеров)) чтоб сделать все систематически, компонентно, лаконично и понятно)
👏👍
Я бы в скрипте проверял не тект, а наличие класса dark
color-scheme упрощает работу если дизайнером не определена темная тема в макете
Очень практичный урок по верстке. А фамилия Блок это псевдо или реальная фамилия?
Соль
Сложно на первый взгляд. Я из тех людей, кто всегда делает что-то не правильно. Или оно само так получается...
Amazing
мне еще очень далеко до создания и верстке сайтов
Вроде бы всё просто так, а всё равно ничего непонятно.
А вы долго всему этому учились ?
Стили тёмной темы,будут потомками того же родительского класса.
Найс байт на превью со слайдером
Вот то что сво-во бордеры перекрашивает и прочие системные элементы делает кго по настоящему полезным.
event.preventDefault(); - переменная event не определена, т.ч. эта строка бессмысленная.
-ytd-rich-grid-items-per-row: 4