» »

Переключатель 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
2019-12-04 Загрузок: 1 Просмотров: 238 Комментарий: (0)

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

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

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

Комментарий: 0
avatar