ZorNet.Ru — сайт для вебмастера » HTML и CSS » Переключатель checkbox CSS в картинках

Переключатель checkbox CSS в картинках

Вашему вниманию оригинальный вариант переключателя checkbox, где задействуем фоновое изображение, что меняться при переключении в картинках. Сам эффект сделан на чистом CSS, где не нужно подключать js или библиотек, все функций и дизайн использован на стилистике.

От вас только нужно создать тематическую картинку, которая бы при одном взгляде было понятно, что вы включили или отключили. Такой формат больше тематический, так как от самого изображение также много зависит. При просмотре demo страницы можно понять, что в большинстве от самого разработчика зависит.

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

Как пример отключить:

Стильный CSS переключатель без JavaScript

В аналогичном виде, только подключаем:

Создать переключатель вкл выкл кнопки в изображение

Установка:

HTML

Код

<div class="napeveku-kucadelem">
  <input type="checkbox" id="nelemog-nuvago" />
  <label id="saganu-dasp-navaka" for="nelemog-nuvago">
  <div id="desamuleg"></div>
  <div id="savlem-kibaka">Выключить</div>
  <div id="savlem-vukled">Включить</div>
  </label>

CSS

Код

.napeveku-kucadelem * {
  box-sizing: content-box;
}
.napeveku-kucadelem {
  display: flex;
  justify-content: center;
}
#nelemog-nuvago {
  display: none;
}
#saganu-dasp-navaka {
  position: relative;
  display: block;
  width: 225px;
  height: 94px;
  background-color: #337AB7;
  border-radius: 87px;
  cursor: pointer;
  transition: 0.4s ease background-color;
  border: 4px solid #BFE2FF;
}
#saganu-dasp-navaka #desamuleg {
  width: 72px;
  height: 72px;
  background-image: url('http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zorner-ru/zornet-chekbox.jpg');
  background-size: 225px;
  position: relative;
  top: 7px;
  left: 7px;
  border-radius: 50%;
  transition: 0.4s ease left, 0.4s ease background-position;
  z-index: 2;
  border: 4px solid #BFE2FF;
}
#saganu-dasp-navaka #savlem-kibaka,
#saganu-dasp-navaka #savlem-vukled {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  text-transform: uppercase;
  margin-left: 102px;
  z-index: 1;
  transition: 0.4s ease opacity;
}
#saganu-dasp-navaka #savlem-vukled {
  margin-left: 30px;
  opacity: 0;
}
#nelemog-nuvago:checked + #saganu-dasp-navaka #savlem-vukled {
  opacity: 1;
}
#nelemog-nuvago:checked + #saganu-dasp-navaka #savlem-kibaka {
  opacity: 0;
}
#nelemog-nuvago:checked + #saganu-dasp-navaka #desamuleg {
  left: 138px;
  background-position: -125px 0;
}

Такой тип переключателя безусловно привнесет на сайт свою оригинальность, ведь как поняли, что также очень много зависит от самого изображение, где нужно так подобрать, чтоб соответствовало функционалу, но и все корректно смотрелось.

Демонстрация
Источник: atuin.ru

04 Декабря 2019 Загрузок: 2 Просмотров: 1464 Комментариев: (3)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 3
Порядок вывода комментариев: Grician 02 Сентября 2021 06:19¹ 0 А можно ли сделать такой переключатель, но что бы он при переключении перебрасывал на другой сайт? Ну или скиньте ссылку если есть что-то подобное -SAM- 02 Сентября 2021 08:19² +1 Как понял, то вам нужно что-то наподобие этого. Можно даже input просто обернуть в анкор (это если не мудрить с js). Если скриптом, то так можно: Код <input type="checkbox" id="nelemog-nuvago" onchange="if(this.checked) document.location.href='http://zornet.ru';"/> Или вот так: Код <script> $(document).ready(function() { $('#nelemog-nuvago').on('click', 'checkbox', function() { window.location= "http://zornet.ru"; }); }); </script> Проверяйте ;) Grician 03 Сентября 2021 06:01³ 0 Спасибо!