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