ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффектный переключатель с помощью CSS3

Эффектный переключатель с помощью CSS3

Еще одна версия красивого пользовательского переключателя, где HTML разметка на чистом CSS стиле, что идет для функций переключателя. Где появляется возможность для веб мастера, что самостоятельно можно выставить тот стиль дизайна, что соответствует сайту. Также здесь для внешнего вида, вы можете задействовать разнообразный стиль CSS или картинки. Ранее на сайте уже размещал пользовательский переключатель с использованием HTML и CSS, где немного по своему дизайну они отличаются.

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

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

Создание переключателя типа radio на CSS

Установка:

HTML

Код

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
  <b>Пользовательская HTML разметка переключателя на CSS стили для переключателя</b> </p>
  <p>
  <input type="radio" id="em" name="radio-group">
  <label for="em">Скрипты для сайта</label>
  </p>
  <p>
  <input type="radio" id="md" name="radio-group">
  <label for="md">Шаблоны для сайта</label>
  </p>
  <p>
  <input type="radio" id="ln" name="radio-group">
  <label for="ln">HTML + CSS</label>
  </p>
  <p>
  <input type="radio" id="ln2" name="radio-group">
  <label for="ln2" class="checkmark">Дизайн для сайта</label>
  </p>
</body>
</html>

CSS

Код

[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}
[type="radio"]:checked + label, [type="radio"]:not(:checked) + label {
  position: relative;
  padding-left: 31px;
  cursor: pointer;
  line-height: 16px;
  display: inline-block;
  color: #4e4a4a;
}
[type="radio"]:checked + label:before, [type="radio"]:not(:checked) + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #b5afaf;
  border-radius: 100%;
  background: #efefef;
}
[type="radio"]:checked + label:after {
  content: '';
  width: 14px;
  height: 14px;
  background: #29a20a;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}
[type="radio"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

Отличное решение по метке состоит в том, что событие щелчка для выбора переключателя начнет свою работу, только в том варианте, если мы произведем клик по основной метке. А следовательно, нажатие на метку установит свойство флажка собственного элемента переключателя в значение true или false.

Демонстрация

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

06 Февраля 2020 Загрузок: 2 Просмотров: 804 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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