какое счастье наткнуться на ваш канал! скачала какой-то дизайн попрактиковаться в верстке, а там все задизайнили - все чек-боксы, все селекты... где бы ни искала ответ везде очень сложно и страшно. у вас прекрасный канал, спасибо за это видео!
Вадим, спасибо вам огромное! Я искренне надеюсь, что вы не пропадёте с просторов ютуба. Я видел ваши семинары (смотреть одно удовольствие). Вы замечательно доносите информацию и вообще приятно смотреть ваши видео. Это очень интересно и крайне полезно. Вы делаете большое дело. Не останавливайтесь! Спасибо!!!
Когда то, видел твое интервью на LoftBlog, и мне понравилось! Сегодня youtube показал это видео на главной странице, сразу кликнул по твоему лицу. Прошу, никогда не прячься за заставками и продолжай в том же духе.
А у меня есть замечание! Но сначала я хочу поблагодарить за этот урок и уроки, которые ты проводишь в html-academy - я как раз готовлю проект к защите на первом курсе, и взял эту реализацию для создания кастомных чекбоксов на проекте. Вначале вскользь упоминается, что input + span завёрнуты внутрь label, просто потому что так субъективно удобнее нежели прописывать for/id. На деле же, без этой вложенности данный чекбокс не будет срабатывать при наведении и клике указателя мышки на span, который не имеет привязки к label. С наставником уже думали применять другую реализацию, пока я не подумал чисто ради эксперимента всё это дело внутрь label вложить! - т.е. это важный момент, на который нужно было сделать акцент! Спасибо и нужно больше таких уроков! :)
Вадим, спасибо большое за ваши полезные и очень продуктивные ролики. Я обучаюсь на Frontend dev. и параллельно захожу на ваш канал, узнаю очень много интересного. Вы профессионал своего дела и идейный человек.👍
На 20-й минуте только и думала о том, что опустила бы чекбоксы ещё чууууть-чуть пониже)) А вообще спасибо, видео интересное и полезное, а футболка - просто блеск!
Делается всё всегда легко. Ну или сравнительно легко. А поддерживается CSS-графика почти всегда очень сложно: она ломается в разных браузерах, на разных платформах, при увеличении или уменьшении масштаба. А если галочке нужно скруглить или как-то иначе повернуть палочки - нужно вызывать рисовальщика на CSS. Или вот ещё: три иконки в проекте делаются на CSS влёт, а ещё две ну вообще никак, чересчур сложно. И что, сделаем три так, а две иначе?
Побольше таких, практических выпусков, как раз снова стоит задача с версткой в которой чекбоксы, последние разы делал неправильно. Теперь исправлю. Спасибо, Вадим!
Итак, Вадим, большое спасибо за выпуск! Я очень рад узнать, как именно ПРАВИЛЬНО делать вёрстку checkbox'ов. Ну и, по аналогии, других элементов, которые с этим связаны (radio, например). Хотя, конечно, есть некоторые моменты, которые вызывают вопросы. А некоторые, которые так и хочется также доработать. Итак, начну с вопросов. Первый вопрос - почему следует придерживаться логике отображения через "position: absolute"? Я, например, стараюсь всячески избегать использование "position: absolute", если имеется альтернатива. В этом случае она есть. Можно использовать размеры самого блока + margin'ы от него. И при этом не нужно будет делать отступы в label'а и блока в absolute контексте. Второй вопрос по поводу сокрытия элементов. Есть такой универсальный класс по сокрытию "visually-hidden". Однако, я неоднократно видел, казалось бы, простую реализацию с "position: absolute; top: -9999px; left: -9999px;". Было бы здорово, если б вы объяснили, в чём минусы подобной конструкции для сокрытия элемента. Так, а теперь по поводу предложений доработки. Меня часто напрягает использование инлайновой svg-шки внутри css. Порой кажется, что этого там быть не должно. Поэтому в проектах я стараюсь всячески избегать подобного. Я понимаю, что подгрузка css будет тянуть с собой и картинку, и по скорости это выиграет. Но есть другие варианты. Например, использование в разметке svg-шки. Конечно, в той реализации, что показана в видео, получается, что они, эти svg-шки, слишком много занимают места. Однако, можно же сделать svg-спрайт. И если вариант с подгрузкой изображения извне вас не устроит, вполне можно этот спрайт встроить на страницу. Тогда обращаться к элементам будет проще и занимать места они будут меньше в самой вёрстке. Посмотрев это видео, я понял, что лучше чаще обращать внимание на все состояния и каждое описывать. Второе, что важно, это использование встроенных в браузер возможностей input'а. Когда делается кастомный input, забывается о том, что люди используют клавиатуру, скринридеры и прочее. А об этом нужно помнить!
1. Position: absolute удобно использовать, когда объект больше высоты строки или потенциально может стать больше неё. Объект больше не мешает тексту. Это мой взгляд и мой опыт, у вас может быть другой.
2. Позиционирование, которое уносит блоки за пределы экрана - это старинный способ, который показал свою неэффективность: может появиться прокрутка, скринридеры могут не воспринять блоки за пределами вьюпорта и так далее. Типичный класс .visually-hidden лишён этих недостатков и проверен в современных условиях.
наконец-то в ютубе появилась годнота. Вадим благодарю за Ваш труд. Просматривая видео чувствую себя отдыхающим на мальдивах, на которые хочу заработать ))) Все толково. Спасибо!
Спасибо огромное за видео! Делаю обычно без изображений, svg и т.д., всё сам в css, например: галочки с помощью псевдоэлементов - привык делать вручную, а разнообразные виды отметок в шаблонах, обычно, редко встречаю
Как только вы начинаете думать про доступность интерфейсов с клавиатуры, вы замечаете, что visibility: hidden прячет контролы так, что на них уже не попасть. У opacity есть проблемы со скринридерами - они могут потерять контролы, которые не отображаются на экране или имеют нулевые размеры.
Все круто! Только у чекбоксов есть еще состояние - "неопределенный" (indeterminate). И галочки в простом случае можно сделать через наклоненные в 45deg before/after псевдо-элементы. Тогда вообще без svg можно обойтись
Неопределённые состояния можно было бы добавить, но я в реальности их не встречал ни разу. Плюс в дизайне их не было. Ну а рисование на CSS работает редко и плохо: чуть угол другой или нужно нарисовать что-то сложнее крестика или галочки - выбрасываем фантазии и делаем нормально. Так что я предпочитаю сразу делать нормально.
Спасибо за такой материал! Мне, как новичку, это было ну просто очень полезно. Возвращайтесь на эту площадку. Думаю, многие этого хотят! P.s. футболка крутецкая 🙃
Тэкс, про то, что лучше бы не вырывать из потока - в комментах сказали (inline-block или inline-flex в зависимости от сложности кастомного чекбокса, чтобы снаружи он был инлайновым и максимально повторял поведение нативного), про :hover и :active тоже сказали (я за то, чтобы всегда все состояния настраивать)). Но! Никто! Вот вообще никто в комментах не сказал про `indeterminate`! Вадим, ну как так-то?) Если уж люди будут учиться делать чекбоксы, то лучше уж, чтобы они сразу про все варианты знали, а не впадали в ступор перед "чёрточкой в коробочке", когда в ней возникнет необходимость) Спасибо за видео)
Ох дружище, у меня был похожий код, но тут возникла необходимость поставить несколько чекбоксов на страницу, оказалось что работает только первый. Сделал по твоему способу, все отлично получилось, только я стилизовал чуть по дргому, вместо картинок стили, вместо галочки, афтер с прозрачность 0, и при чеке, опасити меняется на 1. Этот способ можно использовать если у вас растровая графика.
Вот уже сколько времени пользуюсь твоим способом пока не столкнулся с одной проблемой: выходит, что скрытый input имеет размер 1х1 пикселей, и когда браузер пытается нативно сообщить тебе, что у тебя не отмечен этот checkbox, подсказка тыкает в этот самый пиксель вместо того, чтобы указать на наш label. Это лечится растягиванием input по всей области родителя (главное проверить наличие position: relative у родителя)
Мне пока не очень актуально, т.к на плюсах пишу, но после просмотра захотел нажать "подписаться", а смотрю - уже подписан 🙈 Подписался после видео про nginx
Вадим, спасибо за работу, очень полезные видео и информативные, как наткнулся на ваш канал месяц назад все видео в тот же день пересмотрел, спасибо ^_^
Вадим, когда новые разборы? Заметил интересную штуку. Смотрю это видео, дал фокус инпуту поиска по ютуб наверху. Нажал Shift+Tab два раза, появилась секретная кнопка "пропустить")
вместо span можно использовать от label after и before вместе!? один псевдо-элемент рисует фон, а другой галочку будит вообще гениально ,,, попробуйте ,,,, реально спасибо Вам приятно учится у опытных людей
Гениально до тех пор, пока галочка рисуется на CSS, а как только она сложнее - нужно вставлять иконку. Я предпочитаю сразу вставлять элемент для графики и не рисовать её на CSS.
Сам буквально на днях был озадачен такой ситуацией. Ситуация такая, есть форма, в ней стандартная галочка на обработку персональных данных. Она обязательная, если использовать стандартный чек, то появляется подсказка, типа "Чтобы продолжить установите этот флажок". Если использовать стилизованный, то ничего не происходит, только в консоли ошибка "An invalid form control with name='agreement' is not focusable.". Мне пришёл на ум такой вариант решения: opacity: 0; и position: absolute, для input. И помещать его поверх своей картинки чекбокса, тогда и стандартная надпись "Чтобы продолжить установите этот флажок" будет там где надо) Теперь буду использовать appearance. Не знал про такое. Почему opacity: 0; плохо? Осталось донести до дизайнера и остальных, что состояние фокус важен. И его тоже надо отрисовать.
Контент огонь! А если в планах записать видео как сделать кросс браузерное модальное окно? Которое идеально работает в том числе на iOS/Android. С блокирвой скрола, и без всяких артефактов
Для такого простого дизайна лучше вообще без svg обойтись. Тогда и инлайнить ничего не придётся. Или сделать картинкой только галочку. А так классный способ. Я раньше label после чекбоксов ставил и в стилях + писал, но так действительно удобнее, спасибо)
Отличное видео, практически материал, который можно использовать прямо сейчас! Было бы любопытно увидеть выпуски по использованию более редких css свойств. К примеру никогда не использовал clip(). Хотелось бы понять, для каких именно ситуаций они добавлены. Сделал подписку на патрионе, продолжайте развивать свои проекты, вы большие молодцы! Спасибо!
Свойством clip лучше активно не пользоваться, если можете. Оно выброшено из спецификаций и остаётся в браузерах для совместимости. Но идею понял, может расскажу о редких интересных свойствах.
Единственный волг, который я смотрю на первой скорости.)))
Скучаю по таким полезняшкам.. Вадим, возвращайся на TH-cam! :)
какое счастье наткнуться на ваш канал! скачала какой-то дизайн попрактиковаться в верстке, а там все задизайнили - все чек-боксы, все селекты... где бы ни искала ответ везде очень сложно и страшно. у вас прекрасный канал, спасибо за это видео!
вы чудесный
подача, материал все прекрасно
я в начале пути изучения, и так рада что мне порекомендовали ваш канал
Вадим, спасибо вам огромное! Я искренне надеюсь, что вы не пропадёте с просторов ютуба. Я видел ваши семинары (смотреть одно удовольствие). Вы замечательно доносите информацию и вообще приятно смотреть ваши видео. Это очень интересно и крайне полезно. Вы делаете большое дело. Не останавливайтесь! Спасибо!!!
Не то, чтобы я нуждался или нет в такой информации, но футболки Вадима никогда не подводили. Шикарные, как всегда. И футболка и материал :)
то чувство, когда 3 года страдал от болезни копипаста стилей чекбокса|радио с кодпена, но пришел к доктору и вылечился за один сеанс)
Как же я по вам соскучилась☺️
Как же я не видел эти видео! Даже я все понял и с css и Linux.
Обязательно пересмотрю все ролики и попрактикуюсь.
Автору мегареспект!!!
Спасибо! Всегда прятал checkbox через display: none; и думал что это правильно. Мотивируете писать код правильно.
Когда то, видел твое интервью на LoftBlog, и мне понравилось! Сегодня youtube показал это видео на главной странице, сразу кликнул по твоему лицу. Прошу, никогда не прячься за заставками и продолжай в том же духе.
Как же ты круто все объясняешь! Лайк!
А у меня есть замечание! Но сначала я хочу поблагодарить за этот урок и уроки, которые ты проводишь в html-academy - я как раз готовлю проект к защите на первом курсе, и взял эту реализацию для создания кастомных чекбоксов на проекте. Вначале вскользь упоминается, что input + span завёрнуты внутрь label, просто потому что так субъективно удобнее нежели прописывать for/id. На деле же, без этой вложенности данный чекбокс не будет срабатывать при наведении и клике указателя мышки на span, который не имеет привязки к label. С наставником уже думали применять другую реализацию, пока я не подумал чисто ради эксперимента всё это дело внутрь label вложить! - т.е. это важный момент, на который нужно было сделать акцент! Спасибо и нужно больше таких уроков! :)
Хорошее начало дня: чашка кофе и видео-разбор Вадима Макеева... Вадим, не останавливайтесь :)
Вадим, отличный контент для любого уровня,нужно больше подобного)
Ни знал что такое можно в css сделать. Класс! Магия какая-то!
Спасибо большое. Очень интересно!!!
Это самые основы основ, какая магия )
Большое ЧЕЛОВЕЧЕСКОЕ - СПАСИБО!!!
Лайк как минимум за вложенный инпут в лейбл, всегда задаюсь вопросом зачем айди + фор(лишний код) :)
Ничего лишнего, доступно и хочеться досмотреть до конца! Подписалась)) 🔔
Это было круто! Вы столько всего знаете, офигеть просто, поняла всю необъятность адаптивности!)
Футболка очень! И за выпуск, Вадим, спасибо! Всегда очень емко и по делу.
Только что заверстал форму с кастомными чекбоксами прям повторяя за Вадимом, быстро, просто и красиво . Огонь!
Приятно слушать грамотного специалиста!
Всегда прописывал id для связей...а можно проще. Вадим, спасибо!
Вадим, спасибо большое за ваши полезные и очень продуктивные ролики. Я обучаюсь на Frontend dev. и параллельно захожу на ваш канал, узнаю очень много интересного. Вы профессионал своего дела и идейный человек.👍
На 20-й минуте только и думала о том, что опустила бы чекбоксы ещё чууууть-чуть пониже))
А вообще спасибо, видео интересное и полезное, а футболка - просто блеск!
Да, там можно ещё поиграть ;) Но я решил уже не гоняться за мелочами.
Дополню, что галочка ✓ тоже легко делается через CSS. Это по сути прямоугольник с двумя прозрачными сторонами повернутый на 45 градусов 😉
Делается всё всегда легко. Ну или сравнительно легко. А поддерживается CSS-графика почти всегда очень сложно: она ломается в разных браузерах, на разных платформах, при увеличении или уменьшении масштаба. А если галочке нужно скруглить или как-то иначе повернуть палочки - нужно вызывать рисовальщика на CSS. Или вот ещё: три иконки в проекте делаются на CSS влёт, а ещё две ну вообще никак, чересчур сложно. И что, сделаем три так, а две иначе?
Очень здорово. У Вас хорошо получается объяснять.
Побольше таких, практических выпусков, как раз снова стоит задача с версткой в которой чекбоксы, последние разы делал неправильно. Теперь исправлю. Спасибо, Вадим!
ПРОСТО СУПЕР ПОЛЕЗНЫЕ ПОЗНАВАТЕЛЬНЫЕ УРОКИ, ХОТЕЛ БЫ Я ЛИЧНО С ВАМИ ПОЗНАКОМИТЬСЯ)))
Ага, я тоже хочу с Вадимом познакомиться)) Сейчас стану супер-пупер фронтендером и пойду знакомиться))
Наконец-то!
С возвращением, Вадим!
Как всегда, очень просто и (самое главное) практично. :)
Итак, Вадим, большое спасибо за выпуск! Я очень рад узнать, как именно ПРАВИЛЬНО делать вёрстку checkbox'ов. Ну и, по аналогии, других элементов, которые с этим связаны (radio, например).
Хотя, конечно, есть некоторые моменты, которые вызывают вопросы. А некоторые, которые так и хочется также доработать.
Итак, начну с вопросов. Первый вопрос - почему следует придерживаться логике отображения через "position: absolute"? Я, например, стараюсь всячески избегать использование "position: absolute", если имеется альтернатива. В этом случае она есть. Можно использовать размеры самого блока + margin'ы от него. И при этом не нужно будет делать отступы в label'а и блока в absolute контексте.
Второй вопрос по поводу сокрытия элементов. Есть такой универсальный класс по сокрытию "visually-hidden". Однако, я неоднократно видел, казалось бы, простую реализацию с "position: absolute; top: -9999px; left: -9999px;". Было бы здорово, если б вы объяснили, в чём минусы подобной конструкции для сокрытия элемента.
Так, а теперь по поводу предложений доработки. Меня часто напрягает использование инлайновой svg-шки внутри css. Порой кажется, что этого там быть не должно. Поэтому в проектах я стараюсь всячески избегать подобного. Я понимаю, что подгрузка css будет тянуть с собой и картинку, и по скорости это выиграет. Но есть другие варианты. Например, использование в разметке svg-шки. Конечно, в той реализации, что показана в видео, получается, что они, эти svg-шки, слишком много занимают места. Однако, можно же сделать svg-спрайт. И если вариант с подгрузкой изображения извне вас не устроит, вполне можно этот спрайт встроить на страницу. Тогда обращаться к элементам будет проще и занимать места они будут меньше в самой вёрстке.
Посмотрев это видео, я понял, что лучше чаще обращать внимание на все состояния и каждое описывать. Второе, что важно, это использование встроенных в браузер возможностей input'а. Когда делается кастомный input, забывается о том, что люди используют клавиатуру, скринридеры и прочее. А об этом нужно помнить!
1. Position: absolute удобно использовать, когда объект больше высоты строки или потенциально может стать больше неё. Объект больше не мешает тексту. Это мой взгляд и мой опыт, у вас может быть другой.
2. Позиционирование, которое уносит блоки за пределы экрана - это старинный способ, который показал свою неэффективность: может появиться прокрутка, скринридеры могут не воспринять блоки за пределами вьюпорта и так далее. Типичный класс .visually-hidden лишён этих недостатков и проверен в современных условиях.
3. Я показал много вариантов вставки графики - выбирайте тот, который вам подходит больше. Я не настаиваю ни на каком из них :)
@@pepelsbey Хорошо, Вадим, спасибо большое за ответы на вопросы!)
Как всегда мега полезно! Такого контента не найти на просторах ютуба. Спасибо!
Просто божественно!!!!! Покажи, пжлст, как оформлять гребанные select & option !!!
наконец-то в ютубе появилась годнота. Вадим благодарю за Ваш труд. Просматривая видео чувствую себя отдыхающим на мальдивах, на которые хочу заработать ))) Все толково. Спасибо!
Спасибо огромное за видео! Делаю обычно без изображений, svg и т.д., всё сам в css, например: галочки с помощью псевдоэлементов - привык делать вручную, а разнообразные виды отметок в шаблонах, обычно, редко встречаю
Да действительно это очень полезно как новичкам так и опытным верстальщикам. Спасибо за видео Вадим отлично обьясняете!
Спасибо за подробный разбор! Хотелось бы еще услышать почему не visibility: hidden; и opacity: 0;
Как только вы начинаете думать про доступность интерфейсов с клавиатуры, вы замечаете, что visibility: hidden прячет контролы так, что на них уже не попасть. У opacity есть проблемы со скринридерами - они могут потерять контролы, которые не отображаются на экране или имеют нулевые размеры.
Макеев просто лучший. Лайк однозначно!
всегда радуюсь таким видяшкам - по делу, но и подробно там где надо. Спасибо! хочется больше такого контента
Все круто! Только у чекбоксов есть еще состояние - "неопределенный" (indeterminate).
И галочки в простом случае можно сделать через наклоненные в 45deg before/after псевдо-элементы. Тогда вообще без svg можно обойтись
Неопределённые состояния можно было бы добавить, но я в реальности их не встречал ни разу. Плюс в дизайне их не было. Ну а рисование на CSS работает редко и плохо: чуть угол другой или нужно нарисовать что-то сложнее крестика или галочки - выбрасываем фантазии и делаем нормально. Так что я предпочитаю сразу делать нормально.
Отличная подача, понадобится для сдачи ДЗ по декоративным элементам. Спасибо
Так легко смотреть и все понятно. Не жалко и пол часа. Спасибо, Вадим! Ждём ещё что-то новое)
Теперь я представляю Вас, когда слушаю ваши подкасты!
Спасибо! Ёмко, понятно и никакой воды.
Как же все четко и по сути) нравится)продолжайте!
Спасибо, Вадим.
Будет круто узнать о кастомных селектах.
Возможно ли сделать кастомный слайдер с минимумом скриптов.
Ничего лучше о кастомных селекторах, чем сказано здесь, я не расскажу www.filamentgroup.com/lab/select-css.html
@@pepelsbey Я хотел услышать Ваше профессиональное мнение и я его услышал.
Спасибо!
Вадим, вы классный преподаватель, всё очень понятно и просто оказалось. большое спасибо😉💌
Вадим, большое спасибо! Как всегда: понятно, полезно, доступно и познавательно! Ждем новых видео!
Спасибо огромное за подробный мануал! Всё разложено по полкам, картина с чекбоксами прояснилась :) Больше не буду хаотично копипастить :)
Вадим, спасибо большое. Очень для меня видео, как раз дизайнеры на работе стали увлекается чекбоксами и их стилизацией.
Спасибо за такой материал! Мне, как новичку, это было ну просто очень полезно. Возвращайтесь на эту площадку. Думаю, многие этого хотят!
P.s. футболка крутецкая 🙃
Тэкс, про то, что лучше бы не вырывать из потока - в комментах сказали (inline-block или inline-flex в зависимости от сложности кастомного чекбокса, чтобы снаружи он был инлайновым и максимально повторял поведение нативного), про :hover и :active тоже сказали (я за то, чтобы всегда все состояния настраивать)).
Но! Никто! Вот вообще никто в комментах не сказал про `indeterminate`! Вадим, ну как так-то?) Если уж люди будут учиться делать чекбоксы, то лучше уж, чтобы они сразу про все варианты знали, а не впадали в ступор перед "чёрточкой в коробочке", когда в ней возникнет необходимость)
Спасибо за видео)
Это самый лучший ролик на Ютубе про чекбоксы
Очень доходчиво, очень приятный спикер, спасибо)
Ох дружище, у меня был похожий код, но тут возникла необходимость поставить несколько чекбоксов на страницу, оказалось что работает только первый. Сделал по твоему способу, все отлично получилось, только я стилизовал чуть по дргому, вместо картинок стили, вместо галочки, афтер с прозрачность 0, и при чеке, опасити меняется на 1. Этот способ можно использовать если у вас растровая графика.
Удивительно понятная и приятная подача, спасибо за ваши видео!
Вадим как всегда великолепен! Спасибо.
Шикарно объясняете. Очень жаль, что больше не выходят видео((
Отличный пример с использованием SVG и чистом CSS!
Спасибо за познавательное видео 👍🏻 и с возвращением 👋
Круто, вроде бы простые вещи, но каждый раз что-то новое. спасибо.
Спонсирую проект, досматривая рекламу доконца. Спасибо за идеальную подачу!
Вот уже сколько времени пользуюсь твоим способом пока не столкнулся с одной проблемой:
выходит, что скрытый input имеет размер 1х1 пикселей, и когда браузер пытается нативно сообщить тебе, что у тебя не отмечен этот checkbox, подсказка тыкает в этот самый пиксель вместо того, чтобы указать на наш label. Это лечится растягиванием input по всей области родителя (главное проверить наличие position: relative у родителя)
Да, есть такая проблема. Возможно, надо будет обновить способ и одном из будущих видео. Спасибо, что написали!
Очень крутой видос по чекбоксах. Пригодилось!!! Доступно рассказано, с классными примерами. 👋
круто ! делаю примерно также, но куча полезной инфы !
лайк 👍
Вадим, с возвращением! Как всегда ёмко и по делу. Спасибо!
Жаль что нельзя лайкнуть дважды. Круто все рассказал и очень помог. Спасибо!
Спасибо! Помогли чайнику походу понять не только про чекбоксы..
спасибо большое! слышу фразу: "прогрессивное улучшение", сразу представляю Вадима Макеева=)
Это афигенно! Спасибо, Вадим 👏👏
Вот прям идеально подана информация.
Мне пока не очень актуально, т.к на плюсах пишу, но после просмотра захотел нажать "подписаться", а смотрю - уже подписан 🙈
Подписался после видео про nginx
Смотреть одно удовольствие. Спасибо!
Очень крутые видео, всегда что-то новое узнаю
Нужен разбор position, а то сложно самому полноценно разобраться :с Видео как всегда супер!
This channel has very important knowledge about frontend. Thanks you for job)
Спасибо за видео! Обожаю управление с клавиатуры для навигации по сайтам, жаль что не везде используют такие подходы.
Поставил лайк, используя только клавиатуру)
супер подробно и понятно, очень благодарен!
Умеете, могёте 👍
Вадим, спасибо за работу, очень полезные видео и информативные, как наткнулся на ваш канал месяц назад все видео в тот же день пересмотрел, спасибо ^_^
Вадим, когда новые разборы? Заметил интересную штуку. Смотрю это видео, дал фокус инпуту поиска по ютуб наверху. Нажал Shift+Tab два раза, появилась секретная кнопка "пропустить")
Взял перерыв, но вернусь :)
@@pepelsbey Аш греет душу, за неделю все видео пересмотрел и много нового узнал, спасибо
вместо span можно использовать от label after и before вместе!? один псевдо-элемент рисует фон, а другой галочку будит вообще гениально ,,, попробуйте ,,,, реально спасибо Вам приятно учится у опытных людей
Гениально до тех пор, пока галочка рисуется на CSS, а как только она сложнее - нужно вставлять иконку. Я предпочитаю сразу вставлять элемент для графики и не рисовать её на CSS.
отлично! очень круто! просто и понятно)
Прям класс, огромная благодарность за такие информативные ы подробные видео
Очень круто! А пробел - это перенос строки в коде перед текстом)
Сам буквально на днях был озадачен такой ситуацией.
Ситуация такая, есть форма, в ней стандартная галочка на обработку персональных данных. Она обязательная, если использовать стандартный чек, то появляется подсказка, типа "Чтобы продолжить установите этот флажок". Если использовать стилизованный, то ничего не происходит, только в консоли ошибка "An invalid form control with name='agreement' is not focusable.".
Мне пришёл на ум такой вариант решения: opacity: 0; и position: absolute, для input. И помещать его поверх своей картинки чекбокса, тогда и стандартная надпись "Чтобы продолжить установите этот флажок" будет там где надо)
Теперь буду использовать appearance. Не знал про такое. Почему opacity: 0; плохо?
Осталось донести до дизайнера и остальных, что состояние фокус важен. И его тоже надо отрисовать.
Отваливаются скринридеры, выше дважды спрашивали.
спасибо от дизайнера)
Спасибо! Лучшее обучающее видео по вебу, что я видел. Подписался. Что за редактор?
VS Code
Контент огонь! А если в планах записать видео как сделать кросс браузерное модальное окно? Которое идеально работает в том числе на iOS/Android. С блокирвой скрола, и без всяких артефактов
Планов нет, но идея хорошая :) Спасибо
Первое видео которое посмотрел на канале и, блин, очень круто, очень круто объясняет человек. С удовольствием подписался и посмотрю другие видео.
Для такого простого дизайна лучше вообще без svg обойтись. Тогда и инлайнить ничего не придётся. Или сделать картинкой только галочку.
А так классный способ. Я раньше label после чекбоксов ставил и в стилях + писал, но так действительно удобнее, спасибо)
Блин, написал коммент раньше чем видео досмотрел) Сорри, тема раскрыта)
Красота. На одном дыхании
Классное видео, подача Агонь
Спасибо, за качественную работу!
Отличное видео, практически материал, который можно использовать прямо сейчас! Было бы любопытно увидеть выпуски по использованию более редких css свойств. К примеру никогда не использовал clip(). Хотелось бы понять, для каких именно ситуаций они добавлены. Сделал подписку на патрионе, продолжайте развивать свои проекты, вы большие молодцы! Спасибо!
Свойством clip лучше активно не пользоваться, если можете. Оно выброшено из спецификаций и остаётся в браузерах для совместимости. Но идею понял, может расскажу о редких интересных свойствах.
отлично, Вадим!
нужная инфа, хорошая подача, футболка норм)))
продолжай, плиззз:)
Вадим, спасибо вам большое!
Захожу на это видео уже раз 30й - чтобы в описании взять URL-encoder для SVG)
Я тоже часто открываю слайды своих презентаций, чтобы скопировать какие-то снипеты кода :D