• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание переключателя тумблера на CSS3 (Как сделать переключателя radio в CSS без применения скрипта)
Создание переключателя тумблера на CSS3
Kosten
Дата: Четверг, 2019-05-30, 02:22 | Сообщение 1
Онлайн
Администраторы
Сообщений:25246
Награды: 57


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

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



HTML

Код
<input type="checkbox" id="toggle" class="veklusaged" /> <label for="toggle" class="sikukipasemag"></label>

CSS

Код
.sikukipasemag {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: rgba(27, 25, 25, 0.59);
    border-radius: 18px;
    transition: all 0.3s;
    cursor: pointer;
}
.sikukipasemag::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}
input[type='checkbox']:checked + .sikukipasemag::after {
  transform: translateX(20px);
}
input[type='checkbox']:checked + .sikukipasemag {
    background-color: #3e47ad;
}
.veklusaged {
  position: absolute;
  left: -9999px;
}

Он в основном используется в различных формах, поскольку они очень просты в использовании и сокращают время, необходимое для заполнения всех входных данных.

1. Атрибут for ассоциирует label с соответствующим input CheckBox элемента в соответствии с его id.
2. .switch::after определяет псевдоэлемент для label создания круглой ручки.
3. input[type='checkbox']:checked + .switch::after нацеливается на label стиль псевдоэлемента, когда установлен флажок checked.
4. transform: translateX(20px) перемещает псевдоэлемент на 20 пикселей вправо, когда флажок установлен checked.
5. background-color: #3e47ad; устанавливает цвет фона переключателя на другой цвет, когда флажок установлен checked.
6. .offscreen перемещает input элемент флажка, который не включает в себя какую-либо часть фактического тумблера, из потока документа и размещает его далеко от представления, но не скрывает его, чтобы он был доступен с клавиатуры и программ чтения с экрана.
7. transition: all 0.3s указывает, что все изменения свойств будут перенесены в течение 0,3 секунд, поэтому при переключении свойства label и background-color и псевдоэлемента transform устанавливается флажок.

Демонстрация
Прикрепления: 0164324.png(15.6 Kb) · petedsa.zip(1.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создание переключателя тумблера на CSS3 (Как сделать переключателя radio в CSS без применения скрипта)
  • Страница 1 из 1
  • 1
Поиск: