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

  Рет қаралды 137,359

Вадим Макеев

Вадим Макеев

Күн бұрын

Пікірлер: 506
@alexandraweather4156
@alexandraweather4156 Жыл бұрын
какое счастье наткнуться на ваш канал! скачала какой-то дизайн попрактиковаться в верстке, а там все задизайнили - все чек-боксы, все селекты... где бы ни искала ответ везде очень сложно и страшно. у вас прекрасный канал, спасибо за это видео!
@шмяка
@шмяка 5 жыл бұрын
Единственный волг, который я смотрю на первой скорости.)))
@АлексейСкобелев-в5ч
@АлексейСкобелев-в5ч 3 жыл бұрын
Вадим, спасибо вам огромное! Я искренне надеюсь, что вы не пропадёте с просторов ютуба. Я видел ваши семинары (смотреть одно удовольствие). Вы замечательно доносите информацию и вообще приятно смотреть ваши видео. Это очень интересно и крайне полезно. Вы делаете большое дело. Не останавливайтесь! Спасибо!!!
@vic_shine
@vic_shine 5 жыл бұрын
Скучаю по таким полезняшкам.. Вадим, возвращайся на KZbin! :)
@pegorova
@pegorova 3 жыл бұрын
вы чудесный подача, материал все прекрасно я в начале пути изучения, и так рада что мне порекомендовали ваш канал
@sashayakovlev6199
@sashayakovlev6199 2 жыл бұрын
Как же я не видел эти видео! Даже я все понял и с css и Linux. Обязательно пересмотрю все ролики и попрактикуюсь. Автору мегареспект!!!
@almazmusic
@almazmusic 5 жыл бұрын
Не то, чтобы я нуждался или нет в такой информации, но футболки Вадима никогда не подводили. Шикарные, как всегда. И футболка и материал :)
@ВВПЧП
@ВВПЧП 5 жыл бұрын
Спасибо! Всегда прятал checkbox через display: none; и думал что это правильно. Мотивируете писать код правильно.
@klu2596
@klu2596 5 жыл бұрын
Как же я по вам соскучилась☺️
@alekseykurylev
@alekseykurylev 5 жыл бұрын
Как же ты круто все объясняешь! Лайк!
@semyonmironov92
@semyonmironov92 5 жыл бұрын
Когда то, видел твое интервью на LoftBlog, и мне понравилось! Сегодня youtube показал это видео на главной странице, сразу кликнул по твоему лицу. Прошу, никогда не прячься за заставками и продолжай в том же духе.
@valeriiabielorus7757
@valeriiabielorus7757 3 жыл бұрын
Ничего лишнего, доступно и хочеться досмотреть до конца! Подписалась)) 🔔
@timishurekeev6182
@timishurekeev6182 Жыл бұрын
Вадим, спасибо большое за ваши полезные и очень продуктивные ролики. Я обучаюсь на Frontend dev. и параллельно захожу на ваш канал, узнаю очень много интересного. Вы профессионал своего дела и идейный человек.👍
@tanyaDreamer
@tanyaDreamer 2 жыл бұрын
Это было круто! Вы столько всего знаете, офигеть просто, поняла всю необъятность адаптивности!)
@_kie
@_kie 5 жыл бұрын
А у меня есть замечание! Но сначала я хочу поблагодарить за этот урок и уроки, которые ты проводишь в html-academy - я как раз готовлю проект к защите на первом курсе, и взял эту реализацию для создания кастомных чекбоксов на проекте. Вначале вскользь упоминается, что input + span завёрнуты внутрь label, просто потому что так субъективно удобнее нежели прописывать for/id. На деле же, без этой вложенности данный чекбокс не будет срабатывать при наведении и клике указателя мышки на span, который не имеет привязки к label. С наставником уже думали применять другую реализацию, пока я не подумал чисто ради эксперимента всё это дело внутрь label вложить! - т.е. это важный момент, на который нужно было сделать акцент! Спасибо и нужно больше таких уроков! :)
@zinovyevaleks
@zinovyevaleks 5 жыл бұрын
Только что заверстал форму с кастомными чекбоксами прям повторяя за Вадимом, быстро, просто и красиво . Огонь!
@jdueioksltoirtius9685
@jdueioksltoirtius9685 3 жыл бұрын
Приятно слушать грамотного специалиста!
@taras.o
@taras.o 3 жыл бұрын
Большое ЧЕЛОВЕЧЕСКОЕ - СПАСИБО!!!
@olegbespalko1660
@olegbespalko1660 5 жыл бұрын
Побольше таких, практических выпусков, как раз снова стоит задача с версткой в которой чекбоксы, последние разы делал неправильно. Теперь исправлю. Спасибо, Вадим!
@ileatvazazelpro316
@ileatvazazelpro316 Жыл бұрын
Спасибо огромное за видео! Делаю обычно без изображений, svg и т.д., всё сам в css, например: галочки с помощью псевдоэлементов - привык делать вручную, а разнообразные виды отметок в шаблонах, обычно, редко встречаю
@andreyn.3894
@andreyn.3894 4 жыл бұрын
то чувство, когда 3 года страдал от болезни копипаста стилей чекбокса|радио с кодпена, но пришел к доктору и вылечился за один сеанс)
@b-o-t-l-y
@b-o-t-l-y 5 жыл бұрын
наконец-то в ютубе появилась годнота. Вадим благодарю за Ваш труд. Просматривая видео чувствую себя отдыхающим на мальдивах, на которые хочу заработать ))) Все толково. Спасибо!
@Matvey.809
@Matvey.809 5 жыл бұрын
Вадим, отличный контент для любого уровня,нужно больше подобного)
@lastpro2773
@lastpro2773 4 жыл бұрын
Ни знал что такое можно в css сделать. Класс! Магия какая-то! Спасибо большое. Очень интересно!!!
@mit7871
@mit7871 3 жыл бұрын
Это самые основы основ, какая магия )
@dedlive51
@dedlive51 5 жыл бұрын
Очень здорово. У Вас хорошо получается объяснять.
@dayfuaim
@dayfuaim 5 жыл бұрын
Наконец-то! С возвращением, Вадим! Как всегда, очень просто и (самое главное) практично. :)
@rmnkot
@rmnkot 5 жыл бұрын
Как всегда мега полезно! Такого контента не найти на просторах ютуба. Спасибо!
@annaiustus9445
@annaiustus9445 5 жыл бұрын
всегда радуюсь таким видяшкам - по делу, но и подробно там где надо. Спасибо! хочется больше такого контента
@randomnanastya
@randomnanastya 5 жыл бұрын
Футболка очень! И за выпуск, Вадим, спасибо! Всегда очень емко и по делу.
@lenaryan
@lenaryan 5 жыл бұрын
На 20-й минуте только и думала о том, что опустила бы чекбоксы ещё чууууть-чуть пониже)) А вообще спасибо, видео интересное и полезное, а футболка - просто блеск!
@pepelsbey
@pepelsbey 5 жыл бұрын
Да, там можно ещё поиграть ;) Но я решил уже не гоняться за мелочами.
@mrakov
@mrakov 3 жыл бұрын
Лайк как минимум за вложенный инпут в лейбл, всегда задаюсь вопросом зачем айди + фор(лишний код) :)
@ПавелВиноградов-о8ь
@ПавелВиноградов-о8ь 3 жыл бұрын
Итак, Вадим, большое спасибо за выпуск! Я очень рад узнать, как именно ПРАВИЛЬНО делать вёрстку 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
@pepelsbey 3 жыл бұрын
1. Position: absolute удобно использовать, когда объект больше высоты строки или потенциально может стать больше неё. Объект больше не мешает тексту. Это мой взгляд и мой опыт, у вас может быть другой.
@pepelsbey
@pepelsbey 3 жыл бұрын
2. Позиционирование, которое уносит блоки за пределы экрана - это старинный способ, который показал свою неэффективность: может появиться прокрутка, скринридеры могут не воспринять блоки за пределами вьюпорта и так далее. Типичный класс .visually-hidden лишён этих недостатков и проверен в современных условиях.
@pepelsbey
@pepelsbey 3 жыл бұрын
3. Я показал много вариантов вставки графики - выбирайте тот, который вам подходит больше. Я не настаиваю ни на каком из них :)
@ПавелВиноградов-о8ь
@ПавелВиноградов-о8ь 3 жыл бұрын
@@pepelsbey Хорошо, Вадим, спасибо большое за ответы на вопросы!)
@-it7046
@-it7046 5 жыл бұрын
Как же все четко и по сути) нравится)продолжайте!
@rommand7338
@rommand7338 5 жыл бұрын
Хорошее начало дня: чашка кофе и видео-разбор Вадима Макеева... Вадим, не останавливайтесь :)
@leader7700
@leader7700 5 жыл бұрын
Так легко смотреть и все понятно. Не жалко и пол часа. Спасибо, Вадим! Ждём ещё что-то новое)
@MrSergey11
@MrSergey11 5 жыл бұрын
Вадим, большое спасибо! Как всегда: понятно, полезно, доступно и познавательно! Ждем новых видео!
@diyaudioby4836
@diyaudioby4836 4 жыл бұрын
Спасибо огромное за подробный мануал! Всё разложено по полкам, картина с чекбоксами прояснилась :) Больше не буду хаотично копипастить :)
@mysoulslike
@mysoulslike Жыл бұрын
Да действительно это очень полезно как новичкам так и опытным верстальщикам. Спасибо за видео Вадим отлично обьясняете!
@Andrey_4dev
@Andrey_4dev 5 жыл бұрын
Всегда прописывал id для связей...а можно проще. Вадим, спасибо!
@MariaYCher
@MariaYCher 2 жыл бұрын
Очень доходчиво, очень приятный спикер, спасибо)
@zinovyevaleks
@zinovyevaleks 5 жыл бұрын
Вадим, спасибо большое. Очень для меня видео, как раз дизайнеры на работе стали увлекается чекбоксами и их стилизацией.
@lapetitemort1666
@lapetitemort1666 5 жыл бұрын
ПРОСТО СУПЕР ПОЛЕЗНЫЕ ПОЗНАВАТЕЛЬНЫЕ УРОКИ, ХОТЕЛ БЫ Я ЛИЧНО С ВАМИ ПОЗНАКОМИТЬСЯ)))
@АнастасияТитова-в1ю
@АнастасияТитова-в1ю 5 жыл бұрын
Ага, я тоже хочу с Вадимом познакомиться)) Сейчас стану супер-пупер фронтендером и пойду знакомиться))
@AlexBetev
@AlexBetev 5 жыл бұрын
Спасибо! Ёмко, понятно и никакой воды.
@nof5596
@nof5596 2 жыл бұрын
Удивительно понятная и приятная подача, спасибо за ваши видео!
@elenasmirnova3549
@elenasmirnova3549 2 жыл бұрын
Вадим, вы классный преподаватель, всё очень понятно и просто оказалось. большое спасибо😉💌
@alexbobykin
@alexbobykin Жыл бұрын
Вадим как всегда великолепен! Спасибо.
@pavlokopanytsia2231
@pavlokopanytsia2231 5 жыл бұрын
Макеев просто лучший. Лайк однозначно!
@getmanele
@getmanele 5 жыл бұрын
Спасибо за познавательное видео 👍🏻 и с возвращением 👋
@АлександрЯворский-х8ж
@АлександрЯворский-х8ж 4 жыл бұрын
Это самый лучший ролик на Ютубе про чекбоксы
@maxhalahutski1305
@maxhalahutski1305 2 жыл бұрын
супер подробно и понятно, очень благодарен!
@remontunasdotru
@remontunasdotru 3 жыл бұрын
Смотреть одно удовольствие. Спасибо!
@danceban2387
@danceban2387 5 жыл бұрын
Отличная подача, понадобится для сдачи ДЗ по декоративным элементам. Спасибо
@mikeivanov9194
@mikeivanov9194 5 жыл бұрын
Вадим, с возвращением! Как всегда ёмко и по делу. Спасибо!
@egordoynikov8597
@egordoynikov8597 5 жыл бұрын
Круто, вроде бы простые вещи, но каждый раз что-то новое. спасибо.
@ArtemBurlaka
@ArtemBurlaka 4 жыл бұрын
Отличный пример с использованием SVG и чистом CSS!
@gggwws001
@gggwws001 4 жыл бұрын
This channel has very important knowledge about frontend. Thanks you for job)
@lesan6866
@lesan6866 Жыл бұрын
Прям класс, огромная благодарность за такие информативные ы подробные видео
@KtoEnto
@KtoEnto 3 жыл бұрын
Первое видео которое посмотрел на канале и, блин, очень круто, очень круто объясняет человек. С удовольствием подписался и посмотрю другие видео.
@АртёмШ-ю3м
@АртёмШ-ю3м 3 жыл бұрын
Дополню, что галочка ✓ тоже легко делается через CSS. Это по сути прямоугольник с двумя прозрачными сторонами повернутый на 45 градусов 😉
@pepelsbey
@pepelsbey 3 жыл бұрын
Делается всё всегда легко. Ну или сравнительно легко. А поддерживается CSS-графика почти всегда очень сложно: она ломается в разных браузерах, на разных платформах, при увеличении или уменьшении масштаба. А если галочке нужно скруглить или как-то иначе повернуть палочки - нужно вызывать рисовальщика на CSS. Или вот ещё: три иконки в проекте делаются на CSS влёт, а ещё две ну вообще никак, чересчур сложно. И что, сделаем три так, а две иначе?
@lelyalelyalelya
@lelyalelyalelya 5 жыл бұрын
Спасибо за такой материал! Мне, как новичку, это было ну просто очень полезно. Возвращайтесь на эту площадку. Думаю, многие этого хотят! P.s. футболка крутецкая 🙃
@yedil_myrza
@yedil_myrza 5 жыл бұрын
Теперь я представляю Вас, когда слушаю ваши подкасты!
@mrborodist611
@mrborodist611 5 жыл бұрын
Вадим, спасибо за работу, очень полезные видео и информативные, как наткнулся на ваш канал месяц назад все видео в тот же день пересмотрел, спасибо ^_^
@Nerossoul
@Nerossoul 4 жыл бұрын
Вот прям идеально подана информация.
@pozytron-code
@pozytron-code 5 жыл бұрын
Просто божественно!!!!! Покажи, пжлст, как оформлять гребанные select & option !!!
@АлексейСтупников-д4у
@АлексейСтупников-д4у 3 жыл бұрын
Здравствуйте! Благодарю за видео!
@Veremey
@Veremey 5 жыл бұрын
Спасибо, Вадим. Будет круто узнать о кастомных селектах. Возможно ли сделать кастомный слайдер с минимумом скриптов.
@pepelsbey
@pepelsbey 5 жыл бұрын
Ничего лучше о кастомных селекторах, чем сказано здесь, я не расскажу www.filamentgroup.com/lab/select-css.html
@Veremey
@Veremey 5 жыл бұрын
@@pepelsbey Я хотел услышать Ваше профессиональное мнение и я его услышал. Спасибо!
@mifaress
@mifaress 2 жыл бұрын
Классное видео, подача Агонь
@Kriptio
@Kriptio 3 жыл бұрын
Жаль что нельзя лайкнуть дважды. Круто все рассказал и очень помог. Спасибо!
@kalach2010
@kalach2010 5 жыл бұрын
Это афигенно! Спасибо, Вадим 👏👏
@meget21
@meget21 2 жыл бұрын
Спасибо! Помогли чайнику походу понять не только про чекбоксы..
@RastaManchannel
@RastaManchannel 5 жыл бұрын
Очень крутые видео, всегда что-то новое узнаю
@PowerMan666
@PowerMan666 3 жыл бұрын
Спасибо, за качественную работу!
@someone3835
@someone3835 3 жыл бұрын
Красота. На одном дыхании
@egorgor
@egorgor 5 жыл бұрын
Спасибо за видео! Обожаю управление с клавиатуры для навигации по сайтам, жаль что не везде используют такие подходы.
@AliceWonder984
@AliceWonder984 Жыл бұрын
Шикарно объясняете. Очень жаль, что больше не выходят видео((
@Тамилл
@Тамилл 5 жыл бұрын
Вадим, спасибо вам большое!
@ВладиславСавченко-о9в
@ВладиславСавченко-о9в 5 жыл бұрын
круто ! делаю примерно также, но куча полезной инфы ! лайк 👍
@senioreasy
@senioreasy 3 жыл бұрын
Мне пока не очень актуально, т.к на плюсах пишу, но после просмотра захотел нажать "подписаться", а смотрю - уже подписан 🙈 Подписался после видео про nginx
@Vlad-em1bx
@Vlad-em1bx 2 жыл бұрын
Хочется выразить благодарность автору за видео. Очень интересно и познавательно. Думаю буду смотреть Ваши видео. Кроме этого успел посмотреть Переключатель 🌓 цветовой схемы. Видео просто супер. P.S. Очень хочется увидеть подобный материал по кастомизации select. Делаю свою библиотеку компонентов и не знаю как кастомизировать нативный select.
@AlexeyAndKartashov
@AlexeyAndKartashov 4 жыл бұрын
Тэкс, про то, что лучше бы не вырывать из потока - в комментах сказали (inline-block или inline-flex в зависимости от сложности кастомного чекбокса, чтобы снаружи он был инлайновым и максимально повторял поведение нативного), про :hover и :active тоже сказали (я за то, чтобы всегда все состояния настраивать)). Но! Никто! Вот вообще никто в комментах не сказал про `indeterminate`! Вадим, ну как так-то?) Если уж люди будут учиться делать чекбоксы, то лучше уж, чтобы они сразу про все варианты знали, а не впадали в ступор перед "чёрточкой в коробочке", когда в ней возникнет необходимость) Спасибо за видео)
@RusSkazkin
@RusSkazkin 5 жыл бұрын
Спасибо! Лучшее обучающее видео по вебу, что я видел. Подписался. Что за редактор?
@pepelsbey
@pepelsbey 5 жыл бұрын
VS Code
@naydensnaydens2725
@naydensnaydens2725 3 жыл бұрын
Вадим, спасибо за видео!
@НиколайКотиков-й4у
@НиколайКотиков-й4у 4 жыл бұрын
Очень круто, Вадим, спасибо!
@kstishko6771
@kstishko6771 5 жыл бұрын
Спонсирую проект, досматривая рекламу доконца. Спасибо за идеальную подачу!
@mexvision-3556
@mexvision-3556 5 жыл бұрын
Ох дружище, у меня был похожий код, но тут возникла необходимость поставить несколько чекбоксов на страницу, оказалось что работает только первый. Сделал по твоему способу, все отлично получилось, только я стилизовал чуть по дргому, вместо картинок стили, вместо галочки, афтер с прозрачность 0, и при чеке, опасити меняется на 1. Этот способ можно использовать если у вас растровая графика.
@V4VFAloj7juAyQW
@V4VFAloj7juAyQW 4 жыл бұрын
Спасибо большое, Вадим.
@bruno_lider7177
@bruno_lider7177 4 жыл бұрын
Божечки, он снова в строю🙌 Хотим больше видосиков. Спасибо огромное, Вадим, что уделяешь этому свое драгоценное время. Потому что настолько круто рассказано и со всех сторон рассмотрено, что ловишь счастье✔
@mrselcet
@mrselcet 5 жыл бұрын
Отличное видео. Познавательно и современно. Если будет возможность и желание - буду рад увидеть видео от вас по поводу custom .
@pepelsbey
@pepelsbey 5 жыл бұрын
Ничего лучше о кастомных селекторах, чем сказано здесь, я не расскажу www.filamentgroup.com/lab/select-css.html
@prelovesfamily2565
@prelovesfamily2565 2 жыл бұрын
спасибо большое! слышу фразу: "прогрессивное улучшение", сразу представляю Вадима Макеева=)
@artalar
@artalar 5 жыл бұрын
Спасибо за подробный разбор! Хотелось бы еще услышать почему не visibility: hidden; и opacity: 0;
@pepelsbey
@pepelsbey 5 жыл бұрын
Как только вы начинаете думать про доступность интерфейсов с клавиатуры, вы замечаете, что visibility: hidden прячет контролы так, что на них уже не попасть. У opacity есть проблемы со скринридерами - они могут потерять контролы, которые не отображаются на экране или имеют нулевые размеры.
@olekmyron1291
@olekmyron1291 3 жыл бұрын
И полезно, и приятно. Спасибо )
@maxkonoval5195
@maxkonoval5195 5 жыл бұрын
Привет Вадим! Спасибо за твои видео и подкаст, иногда очень помогает:)
@Alex-ni2uv
@Alex-ni2uv 5 жыл бұрын
отлично, Вадим! нужная инфа, хорошая подача, футболка норм))) продолжай, плиззз:)
@ДаряЮрко-у9т
@ДаряЮрко-у9т 2 жыл бұрын
Полезно, спасибо!
@АлексейНаумов-г6э
@АлексейНаумов-г6э 5 жыл бұрын
Нужен разбор position, а то сложно самому полноценно разобраться :с Видео как всегда супер!
@olegvoron6847
@olegvoron6847 4 жыл бұрын
Спасибо за видео. Очень полезное
@PavelTiunov
@PavelTiunov 5 жыл бұрын
Очень кстати оказалось видео, спасибо большое. Исправил у себя в проекте))
@alexanderbaltsevich9270
@alexanderbaltsevich9270 5 жыл бұрын
Отличное видео, практически материал, который можно использовать прямо сейчас! Было бы любопытно увидеть выпуски по использованию более редких css свойств. К примеру никогда не использовал clip(). Хотелось бы понять, для каких именно ситуаций они добавлены. Сделал подписку на патрионе, продолжайте развивать свои проекты, вы большие молодцы! Спасибо!
@pepelsbey
@pepelsbey 5 жыл бұрын
Свойством clip лучше активно не пользоваться, если можете. Оно выброшено из спецификаций и остаётся в браузерах для совместимости. Но идею понял, может расскажу о редких интересных свойствах.
@yunggoatflexin8919
@yunggoatflexin8919 2 жыл бұрын
отлично! очень круто! просто и понятно)
@B_G_V
@B_G_V 3 жыл бұрын
Умеете, могёте 👍
Мясо вегана? 🧐 @Whatthefshow
01:01
История одного вокалиста
Рет қаралды 7 МЛН
小丑女COCO的审判。#天使 #小丑 #超人不会飞
00:53
超人不会飞
Рет қаралды 16 МЛН
СИНИЙ ИНЕЙ УЖЕ ВЫШЕЛ!❄️
01:01
DO$HIK
Рет қаралды 3,3 МЛН
Звёздный рейтинг ⭐️⭐️⭐️⭐️⭐️
43:09
Вадим Макеев
Рет қаралды 39 М.
Стилизация checkbox и radio
31:30
От 0 до 1
Рет қаралды 25 М.
Мясо вегана? 🧐 @Whatthefshow
01:01
История одного вокалиста
Рет қаралды 7 МЛН