| Kosten | Четверг, 30 Мая 2019, 02:22 | Сообщение 1 |
| В статье разберем, как можно создать красивый переключатель тумблер, который полностью создан на чистом 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 устанавливается флажок.
Демонстрация
| | Страна: (RU) |
| |
