✅ Кастомные чекбоксы правильно

[@alexandraweather4156]

какое счастье наткнуться на ваш канал! скачала какой-то дизайн попрактиковаться в верстке, а там все задизайнили - все чек-боксы, все селекты... где бы ни искала ответ везде очень сложно и страшно. у вас прекрасный канал, спасибо за это видео!

[@шмяка]

Единственный волг, который я смотрю на первой скорости.)))

[@АлексейСкобелев-в5ч]

Вадим, спасибо вам огромное! Я искренне надеюсь, что вы не пропадёте с просторов ютуба. Я видел ваши семинары (смотреть одно удовольствие). Вы замечательно доносите информацию и вообще приятно смотреть ваши видео. Это очень интересно и крайне полезно. Вы делаете большое дело. Не останавливайтесь! Спасибо!!!

[@vic_shine]

Скучаю по таким полезняшкам.. Вадим, возвращайся на KZbin! :)

[@pegorova]

вы чудесный подача, материал все прекрасно я в начале пути изучения, и так рада что мне порекомендовали ваш канал

[@sashayakovlev6199]

Как же я не видел эти видео! Даже я все понял и с css и Linux. Обязательно пересмотрю все ролики и попрактикуюсь. Автору мегареспект!!!

[@almazmusic]

Не то, чтобы я нуждался или нет в такой информации, но футболки Вадима никогда не подводили. Шикарные, как всегда. И футболка и материал :)

[@ВВПЧП]

Спасибо! Всегда прятал checkbox через display: none; и думал что это правильно. Мотивируете писать код правильно.

[@klu2596]

Как же я по вам соскучилась☺️

[@alekseykurylev]

Как же ты круто все объясняешь! Лайк!

[@semyonmironov92]

Когда то, видел твое интервью на LoftBlog, и мне понравилось! Сегодня youtube показал это видео на главной странице, сразу кликнул по твоему лицу. Прошу, никогда не прячься за заставками и продолжай в том же духе.

[@valeriiabielorus7757]

Ничего лишнего, доступно и хочеться досмотреть до конца! Подписалась)) 🔔

[@timishurekeev6182]

Вадим, спасибо большое за ваши полезные и очень продуктивные ролики. Я обучаюсь на Frontend dev. и параллельно захожу на ваш канал, узнаю очень много интересного. Вы профессионал своего дела и идейный человек.👍

[@tanyaDreamer]

Это было круто! Вы столько всего знаете, офигеть просто, поняла всю необъятность адаптивности!)

[@_kie]

А у меня есть замечание! Но сначала я хочу поблагодарить за этот урок и уроки, которые ты проводишь в html-academy - я как раз готовлю проект к защите на первом курсе, и взял эту реализацию для создания кастомных чекбоксов на проекте. Вначале вскользь упоминается, что input + span завёрнуты внутрь label, просто потому что так субъективно удобнее нежели прописывать for/id. На деле же, без этой вложенности данный чекбокс не будет срабатывать при наведении и клике указателя мышки на span, который не имеет привязки к label. С наставником уже думали применять другую реализацию, пока я не подумал чисто ради эксперимента всё это дело внутрь label вложить! - т.е. это важный момент, на который нужно было сделать акцент! Спасибо и нужно больше таких уроков! :)

[@zinovyevaleks]

Только что заверстал форму с кастомными чекбоксами прям повторяя за Вадимом, быстро, просто и красиво . Огонь!

[@jdueioksltoirtius9685]

Приятно слушать грамотного специалиста!

[@taras.o]

Большое ЧЕЛОВЕЧЕСКОЕ - СПАСИБО!!!

[@olegbespalko1660]

Побольше таких, практических выпусков, как раз снова стоит задача с версткой в которой чекбоксы, последние разы делал неправильно. Теперь исправлю. Спасибо, Вадим!

[@ileatvazazelpro316]

Спасибо огромное за видео! Делаю обычно без изображений, svg и т.д., всё сам в css, например: галочки с помощью псевдоэлементов - привык делать вручную, а разнообразные виды отметок в шаблонах, обычно, редко встречаю

[@andreyn.3894]

то чувство, когда 3 года страдал от болезни копипаста стилей чекбокса|радио с кодпена, но пришел к доктору и вылечился за один сеанс)

[@b-o-t-l-y]

наконец-то в ютубе появилась годнота. Вадим благодарю за Ваш труд. Просматривая видео чувствую себя отдыхающим на мальдивах, на которые хочу заработать ))) Все толково. Спасибо!

[@Matvey.809]

Вадим, отличный контент для любого уровня,нужно больше подобного)

[@lastpro2773]

Ни знал что такое можно в css сделать. Класс! Магия какая-то! Спасибо большое. Очень интересно!!!

[@mit7871]

Это самые основы основ, какая магия )

[@dedlive51]

Очень здорово. У Вас хорошо получается объяснять.

[@dayfuaim]

Наконец-то! С возвращением, Вадим! Как всегда, очень просто и (самое главное) практично. :)

[@rmnkot]

Как всегда мега полезно! Такого контента не найти на просторах ютуба. Спасибо!

[@annaiustus9445]

всегда радуюсь таким видяшкам - по делу, но и подробно там где надо. Спасибо! хочется больше такого контента

[@randomnanastya]

Футболка очень! И за выпуск, Вадим, спасибо! Всегда очень емко и по делу.

[@lenaryan]

На 20-й минуте только и думала о том, что опустила бы чекбоксы ещё чууууть-чуть пониже)) А вообще спасибо, видео интересное и полезное, а футболка - просто блеск!

[@pepelsbey]

Да, там можно ещё поиграть ;) Но я решил уже не гоняться за мелочами.

[@mrakov]

Лайк как минимум за вложенный инпут в лейбл, всегда задаюсь вопросом зачем айди + фор(лишний код) :)

[@ПавелВиноградов-о8ь]

Итак, Вадим, большое спасибо за выпуск! Я очень рад узнать, как именно ПРАВИЛЬНО делать вёрстку 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, забывается о том, что люди используют клавиатуру, скринридеры и прочее. А об этом нужно помнить!

[@pepelsbey]

1. Position: absolute удобно использовать, когда объект больше высоты строки или потенциально может стать больше неё. Объект больше не мешает тексту. Это мой взгляд и мой опыт, у вас может быть другой.

[@pepelsbey]

2. Позиционирование, которое уносит блоки за пределы экрана - это старинный способ, который показал свою неэффективность: может появиться прокрутка, скринридеры могут не воспринять блоки за пределами вьюпорта и так далее. Типичный класс .visually-hidden лишён этих недостатков и проверен в современных условиях.

[@pepelsbey]

3. Я показал много вариантов вставки графики - выбирайте тот, который вам подходит больше. Я не настаиваю ни на каком из них :)

[@ПавелВиноградов-о8ь]

@@pepelsbey Хорошо, Вадим, спасибо большое за ответы на вопросы!)

[@-it7046]

Как же все четко и по сути) нравится)продолжайте!

[@rommand7338]

Хорошее начало дня: чашка кофе и видео-разбор Вадима Макеева... Вадим, не останавливайтесь :)

[@leader7700]

Так легко смотреть и все понятно. Не жалко и пол часа. Спасибо, Вадим! Ждём ещё что-то новое)

[@MrSergey11]

Вадим, большое спасибо! Как всегда: понятно, полезно, доступно и познавательно! Ждем новых видео!

[@diyaudioby4836]

Спасибо огромное за подробный мануал! Всё разложено по полкам, картина с чекбоксами прояснилась :) Больше не буду хаотично копипастить :)

[@mysoulslike]

Да действительно это очень полезно как новичкам так и опытным верстальщикам. Спасибо за видео Вадим отлично обьясняете!

[@Andrey_4dev]

Всегда прописывал id для связей...а можно проще. Вадим, спасибо!

[@MariaYCher]

Очень доходчиво, очень приятный спикер, спасибо)

[@zinovyevaleks]

Вадим, спасибо большое. Очень для меня видео, как раз дизайнеры на работе стали увлекается чекбоксами и их стилизацией.

[@lapetitemort1666]

ПРОСТО СУПЕР ПОЛЕЗНЫЕ ПОЗНАВАТЕЛЬНЫЕ УРОКИ, ХОТЕЛ БЫ Я ЛИЧНО С ВАМИ ПОЗНАКОМИТЬСЯ)))

[@АнастасияТитова-в1ю]

Ага, я тоже хочу с Вадимом познакомиться)) Сейчас стану супер-пупер фронтендером и пойду знакомиться))

[@AlexBetev]

Спасибо! Ёмко, понятно и никакой воды.

[@nof5596]

Удивительно понятная и приятная подача, спасибо за ваши видео!

[@elenasmirnova3549]

Вадим, вы классный преподаватель, всё очень понятно и просто оказалось. большое спасибо😉💌

[@alexbobykin]

Вадим как всегда великолепен! Спасибо.

[@pavlokopanytsia2231]

Макеев просто лучший. Лайк однозначно!

[@getmanele]

Спасибо за познавательное видео 👍🏻 и с возвращением 👋

[@АлександрЯворский-х8ж]

Это самый лучший ролик на Ютубе про чекбоксы

[@maxhalahutski1305]

супер подробно и понятно, очень благодарен!

[@remontunasdotru]

Смотреть одно удовольствие. Спасибо!

[@danceban2387]

Отличная подача, понадобится для сдачи ДЗ по декоративным элементам. Спасибо

[@mikeivanov9194]

Вадим, с возвращением! Как всегда ёмко и по делу. Спасибо!

[@egordoynikov8597]

Круто, вроде бы простые вещи, но каждый раз что-то новое. спасибо.

[@ArtemBurlaka]

Отличный пример с использованием SVG и чистом CSS!

[@gggwws001]

This channel has very important knowledge about frontend. Thanks you for job)

[@lesan6866]

Прям класс, огромная благодарность за такие информативные ы подробные видео

[@KtoEnto]

Первое видео которое посмотрел на канале и, блин, очень круто, очень круто объясняет человек. С удовольствием подписался и посмотрю другие видео.

[@АртёмШ-ю3м]

Дополню, что галочка ✓ тоже легко делается через CSS. Это по сути прямоугольник с двумя прозрачными сторонами повернутый на 45 градусов 😉

[@pepelsbey]

Делается всё всегда легко. Ну или сравнительно легко. А поддерживается CSS-графика почти всегда очень сложно: она ломается в разных браузерах, на разных платформах, при увеличении или уменьшении масштаба. А если галочке нужно скруглить или как-то иначе повернуть палочки - нужно вызывать рисовальщика на CSS. Или вот ещё: три иконки в проекте делаются на CSS влёт, а ещё две ну вообще никак, чересчур сложно. И что, сделаем три так, а две иначе?

[@lelyalelyalelya]

Спасибо за такой материал! Мне, как новичку, это было ну просто очень полезно. Возвращайтесь на эту площадку. Думаю, многие этого хотят! P.s. футболка крутецкая 🙃

[@yedil_myrza]

Теперь я представляю Вас, когда слушаю ваши подкасты!

[@mrborodist611]

Вадим, спасибо за работу, очень полезные видео и информативные, как наткнулся на ваш канал месяц назад все видео в тот же день пересмотрел, спасибо ^_^

[@Nerossoul]

Вот прям идеально подана информация.

[@pozytron-code]

Просто божественно!!!!! Покажи, пжлст, как оформлять гребанные select & option !!!

[@АлексейСтупников-д4у]

Здравствуйте! Благодарю за видео!

[@Veremey]

Спасибо, Вадим. Будет круто узнать о кастомных селектах. Возможно ли сделать кастомный слайдер с минимумом скриптов.

[@pepelsbey]

Ничего лучше о кастомных селекторах, чем сказано здесь, я не расскажу www.filamentgroup.com/lab/select-css.html

[@Veremey]

@@pepelsbey Я хотел услышать Ваше профессиональное мнение и я его услышал. Спасибо!

[@mifaress]

Классное видео, подача Агонь

[@Kriptio]

Жаль что нельзя лайкнуть дважды. Круто все рассказал и очень помог. Спасибо!

[@kalach2010]

Это афигенно! Спасибо, Вадим 👏👏

[@meget21]

Спасибо! Помогли чайнику походу понять не только про чекбоксы..

[@RastaManchannel]

Очень крутые видео, всегда что-то новое узнаю

[@PowerMan666]

Спасибо, за качественную работу!

[@someone3835]

Красота. На одном дыхании

[@egorgor]

Спасибо за видео! Обожаю управление с клавиатуры для навигации по сайтам, жаль что не везде используют такие подходы.

[@AliceWonder984]

Шикарно объясняете. Очень жаль, что больше не выходят видео((

[@Тамилл]

Вадим, спасибо вам большое!

[@ВладиславСавченко-о9в]

круто ! делаю примерно также, но куча полезной инфы ! лайк 👍

[@senioreasy]

Мне пока не очень актуально, т.к на плюсах пишу, но после просмотра захотел нажать "подписаться", а смотрю - уже подписан 🙈 Подписался после видео про nginx

[@Vlad-em1bx]

Хочется выразить благодарность автору за видео. Очень интересно и познавательно. Думаю буду смотреть Ваши видео. Кроме этого успел посмотреть Переключатель 🌓 цветовой схемы. Видео просто супер. P.S. Очень хочется увидеть подобный материал по кастомизации select. Делаю свою библиотеку компонентов и не знаю как кастомизировать нативный select.

[@AlexeyAndKartashov]

Тэкс, про то, что лучше бы не вырывать из потока - в комментах сказали (inline-block или inline-flex в зависимости от сложности кастомного чекбокса, чтобы снаружи он был инлайновым и максимально повторял поведение нативного), про :hover и :active тоже сказали (я за то, чтобы всегда все состояния настраивать)). Но! Никто! Вот вообще никто в комментах не сказал про `indeterminate`! Вадим, ну как так-то?) Если уж люди будут учиться делать чекбоксы, то лучше уж, чтобы они сразу про все варианты знали, а не впадали в ступор перед "чёрточкой в коробочке", когда в ней возникнет необходимость) Спасибо за видео)

[@RusSkazkin]

Спасибо! Лучшее обучающее видео по вебу, что я видел. Подписался. Что за редактор?

[@pepelsbey]

VS Code

[@naydensnaydens2725]

Вадим, спасибо за видео!

[@НиколайКотиков-й4у]

Очень круто, Вадим, спасибо!

[@kstishko6771]

Спонсирую проект, досматривая рекламу доконца. Спасибо за идеальную подачу!

[@mexvision-3556]

Ох дружище, у меня был похожий код, но тут возникла необходимость поставить несколько чекбоксов на страницу, оказалось что работает только первый. Сделал по твоему способу, все отлично получилось, только я стилизовал чуть по дргому, вместо картинок стили, вместо галочки, афтер с прозрачность 0, и при чеке, опасити меняется на 1. Этот способ можно использовать если у вас растровая графика.

[@V4VFAloj7juAyQW]

Спасибо большое, Вадим.

[@bruno_lider7177]

Божечки, он снова в строю🙌 Хотим больше видосиков. Спасибо огромное, Вадим, что уделяешь этому свое драгоценное время. Потому что настолько круто рассказано и со всех сторон рассмотрено, что ловишь счастье✔

[@mrselcet]

Отличное видео. Познавательно и современно. Если будет возможность и желание - буду рад увидеть видео от вас по поводу custom .

[@pepelsbey]

Ничего лучше о кастомных селекторах, чем сказано здесь, я не расскажу www.filamentgroup.com/lab/select-css.html

[@prelovesfamily2565]

спасибо большое! слышу фразу: "прогрессивное улучшение", сразу представляю Вадима Макеева=)

[@artalar]

Спасибо за подробный разбор! Хотелось бы еще услышать почему не visibility: hidden; и opacity: 0;

[@pepelsbey]

Как только вы начинаете думать про доступность интерфейсов с клавиатуры, вы замечаете, что visibility: hidden прячет контролы так, что на них уже не попасть. У opacity есть проблемы со скринридерами - они могут потерять контролы, которые не отображаются на экране или имеют нулевые размеры.

[@olekmyron1291]

И полезно, и приятно. Спасибо )

[@maxkonoval5195]

Привет Вадим! Спасибо за твои видео и подкаст, иногда очень помогает:)

[@Alex-ni2uv]

отлично, Вадим! нужная инфа, хорошая подача, футболка норм))) продолжай, плиззз:)

[@ДаряЮрко-у9т]

Полезно, спасибо!

[@АлексейНаумов-г6э]

Нужен разбор position, а то сложно самому полноценно разобраться :с Видео как всегда супер!

[@olegvoron6847]

Спасибо за видео. Очень полезное

[@PavelTiunov]

Очень кстати оказалось видео, спасибо большое. Исправил у себя в проекте))

[@alexanderbaltsevich9270]

Отличное видео, практически материал, который можно использовать прямо сейчас! Было бы любопытно увидеть выпуски по использованию более редких css свойств. К примеру никогда не использовал clip(). Хотелось бы понять, для каких именно ситуаций они добавлены. Сделал подписку на патрионе, продолжайте развивать свои проекты, вы большие молодцы! Спасибо!

[@pepelsbey]

Свойством clip лучше активно не пользоваться, если можете. Оно выброшено из спецификаций и остаётся в браузерах для совместимости. Но идею понял, может расскажу о редких интересных свойствах.

[@yunggoatflexin8919]

отлично! очень круто! просто и понятно)

[@B_G_V]

Умеете, могёте 👍