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

[@шмяка]

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

[@alexandraweather4156]

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

[@vic_shine]

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

[@pegorova]

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

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

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

[@sashayakovlev6199]

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

[@klu2596]

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

[@ВВПЧП]

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

[@alekseykurylev]

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

[@almazmusic]

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

[@valeriiabielorus7757]

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

[@Matvey.809]

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

[@taras.o]

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

[@tanyaDreamer]

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

[@dedlive51]

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

[@semyonmironov92]

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

[@jdueioksltoirtius9685]

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

[@dayfuaim]

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

[@timishurekeev6182]

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

[@randomnanastya]

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

[@lastpro2773]

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

[@mit7871]

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

[@АлександрЗиновьев-п7ц]

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

[@rmnkot]

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

[@mrakov]

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

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

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

[@olegbespalko1660]

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

[@mifaress]

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

[@annaiustus9445]

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

[@_kie]

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

[@ileatvazazelpro316]

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

[@MariaYCher]

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

[@elenasmirnova3549]

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

[@MrSergey11]

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

[@ПавелВиноградов-о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 Хорошо, Вадим, спасибо большое за ответы на вопросы!)

[@Andrey_4dev]

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

[@AlexBetev]

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

[@-it7046]

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

[@alexbobykin]

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

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

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

[@leader7700]

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

[@rommand7338]

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

[@danceban2387]

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

[@ArtemBurlaka]

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

[@lapetitemort1666]

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

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

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

[@ДмитрийРешетарчук-с4г]

Бесподобно, супер.

[@yunggoatflexin8919]

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

[@mysoulslike]

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

[@pavlokopanytsia2231]

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

[@lesan6866]

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

[@getmanele]

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

[@nof5596]

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

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

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

[@pepelsbey]

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

[@diyaudioby4836]

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

[@denispepper2830]

Круто! Спасибо!

[@gggwws001]

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

[@pozytron-code]

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

[@remontunasdotru]

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

[@АлександрЗиновьев-п7ц]

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

[@maxhalahutski1305]

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

[@KtoEnto]

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

[@dmitryorlov1566]

Большое спасибо!

[@RusSkazkiin]

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

[@pepelsbey]

VS Code

[@mikeivanov9194]

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

[@egordoynikov8597]

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

[@B_G_V]

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

[@andreyn.3894]

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

[@Veremey]

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

[@pepelsbey]

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

[@Veremey]

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

[@RastaManchannel]

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

[@lelyalelyalelya]

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

[@Nerossoul]

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

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

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

[@lenaryan]

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

[@pepelsbey]

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

[@ОлесяОлехнович-в4я]

Спасибо! Помогли!!

[@yedil_myrza]

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

[@mrborodist611]

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

[@kalach2010]

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

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

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

[@artalar]

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

[@pepelsbey]

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

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

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

[@egorgor]

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

[@PowerMan666]

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

[@Vlad-em1bx]

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

[@ИраХон-к6и]

спасибо от дизайнера)

[@Kriptio]

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

[@someone3835]

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

[@AliceWonder984]

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

[@Danze_lite]

восторг!

[@Тамилл]

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

[@Alex-ni2uv]

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

[@mrselcet]

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

[@pepelsbey]

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

[@ЕкатеринаГорбанева-щ2у]

Спасибо большое!!!!!!

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

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

[@siarheilabetsik5658]

Все круто! Только у чекбоксов есть еще состояние - "неопределенный" (indeterminate). И галочки в простом случае можно сделать через наклоненные в 45deg before/after псевдо-элементы. Тогда вообще без svg можно обойтись

[@pepelsbey]

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

[@V4VFAloj7juAyQW]

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

[@tsssssssss1]

Скетч и другие редакторы позволяют копировать hex большими буквами, но их надо не лениться переводить в строчные. Строчные символы весят меньше, а минификаторы не умеют приводить к нижнему регистру. В VSCode это можно сделать через ctrl+k && ctrl+l. Можно сразу все слова на странице: ctrl+a && ctrl+k && ctrl+l (ниже Вадим призывает быть осторожнее с последним способом). Заданные цвета типа green весят меньше всего, но усложняют чтение кода, поэтому их использовать не рекомендуется.

[@pepelsbey]

Я обычно перевожу хексы в строчные, да. В этом случае копировал для демки и не заморачивался. Но вообще - нужно писать как вам удобно, а оптимизировать должны оптимизаторы. А вот с Ctrl A поосторожнее - атрибут viewBox в инлайновом SVG перестанет работать, если станет viewbox. Досадное исключение, но вот.

[@tsssssssss1]

@@pepelsbey Точно! Подправил свой комментарий.

[@PavelTiunov]

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

[@maxkonoval5195]

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

[@naydensnaydens2725]

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

[@alexanderbaltsevich9270]

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

[@pepelsbey]

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

[@olekmyron1291]

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