CSS фичи #19 | Переключатель | input checkbox CSS3 style

Крутой канал по веб-разработке:
Подпишитесь 👆

Сегодня в рубрике CSS фичи мы сделаем кнопку-переключатель для сайта на чистом CSS3, для этого мы будем использовать input type checkbox и label. Погнали!

Исходный код из видео:

Подпишитесь на канал, если вам нравятся эти видео:

Больше контента в нашей группе Вконтакте
Или в нашем Telegram-канале
Присоединяйтесь к нашему сообществу Discord
Telegram-канал "Лысый из браузера":

---------
Я использую хостинг Link Host с 2014 года

#css #css3 #cssTutorial Телеграм-каналы с дизайн-макетами для тренировки вёрстки:

Каналы с крутыми фичами на CSS и JavaScript:

Канал с терминами для айтишников:

Канал, где публикуют ссылки на полезные сервисы и сайты:

[Glo_Academy]

Крутой канал по веб-разработке:
Подпишитесь 👆

[sqzntef]

О да... CSS-фичи. Еее. Больше спасибо за такие ролики!

Когда будут, если вообще будут, JS-фичи?

[MsAnabios]

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

[shoxruxrustamovshoxfitnes]

Я смотрел все эти свичи . Супер. Спасибо брат

[krievskiy]

Вообще АТАС!!!!
Я залпом съел всю эту рубрику с фичами! Уже 2020 год! Нужна 20ая фича!!!!

[webdasturlashdarslari]

Привет Артём. Я из Узбекистана. Даже если я плохо говорю по-русски, я все равно следую вашему каналу. Видео довольно четкое. Спасибо Нам всем нравится плейлист css ficha на вашем канале. Я прошу вас. Публикуйте 2-3 видео в неделю в этом плейлисте. Да, еще одно предложение. Также публикуйте базовые видео на Backend. Php если возможно. Заранее спасибо !!! Мы ждем)

[RustamBEKO]

Спасибо, годная рубрика) лайк и подписка

[lockdwnll]

Спасибо, хотелось бы JS фич еще, а то топовая рубрика, но видосов мало(

[sheraabdurakhmanov]

АРТЕЕЕЕЕЕЕЕЕЕЕЕЕМ ДАВАЙ ЕЩЕ ФИЧИ МЫ ТАК

[GELIC]

мощно, а я всегда такие вещи делаю только на js

[pronk]

было бы классно увидеть еще php фичи, ну или что-то вроде этого)

[GELIC]

а и ещё одно: когда пользователь нажимает на кнопку или другой елемент то он немного синеет если вы понимаете о чем я, чтобы этого избежать нужно прописать следующее:

button:focus {
-webkit-tap-highlight-color: transparent;
-o-tap-highlight-color: transparent;
-moz-tap-highlight-color: transparent;
}

[romanklymovych]

Такой вопрос. Когда мы делаем checkbox-label, там у него используется 2 раза background. У меня не применяется linear-gradient Как так получилось что в видео все сработало, а у меня нет? Спасибо

[koralinrous]

Объясните пожалуйста как id на инпуте влияет на передвижение, оно типо привязывает наш лейбл ?

[edhyxzg]

А как сделать чтоб этот эефффект отслеживаол или прикрепился на курсор то есть на mousemove ?

[mgovbjp]

Артем или кто-нибудь, подскажите, очень нужно. Данный чекбокс получился, но не могу в js получить его состояние. Не важно включен или нет, по запросу item.checked всегда пишет false. Не могу его использовать в проекте. Нашел его же в codepen. Прямо в нем же пробовал, то же самое. Не пойму в каком месте что-то пошло не так. Буду очень благодарен за ответ. Заранее спасибо!!!

[ndkvvgm]

Простите, хотел узнать, а если поменять цвет фона при переключении, это будет работать? Т.е., нажимаем на кнопку и фон меняется. Или это нужно делать отдельно

[zcbesaba]

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

[uzmtxws]

Как отследить на js то или иное положение переключателя?

[TheElement]

привет, больше не будет уроков по фитчам?