От автора: В этом уроке, мы покажем, как легко создавать невероятные круглые, плоские и переворачивающиеся переключатели на CSS. Мы будем использовать чистый CSS для создания переключателей, добавляя классное взаимодействие с пользователем к функционалу флажков.
Пояснение
Часто нам необходимо, чтобы пользователь поставил/снял флажок, что означало бы ответ да/нет на какой-то вопрос или утверждение. Мы вставляем лейбл, поле ввода флажка и извлекаем булево значение после отправки формы, чтобы увидеть поставил ли пользователь флажок. Все мы знаем как выглядят стили флажков по умолчанию и нет решений для стилизации флажков на чистом CSS. Этот тот элемент, чьи стили отдельно управляются браузером. Разве не было б хорошо иметь лощеный интерфейс, такой как мы иногда видим в мобильных прриложениях?
Подождите! Немного приемов CSS и решение для нас готово: добавляя псевдоклассы :checked,:before, и :after к нашим флажкам, мы можем добиться красивых переключателей с плавными эффектами переходов. Никакой черной магии… только красота чистого CSS. Давайте приступим.
Закладываем основу
В HTML нет ничего нового. Стандартный флажок с соответствующим лейблом. Каждая из этих комбаниций лейбл/поле ввода завернута в отдельный div. Я задал ему класс switch. Я собираюсь продемонстрировать 3 разных стиля:
Круглый переключатель (похожий на тот, что используется в iOS)
Круглый переключатель с плоским оформлением
Да/нет перключатель
Каждый стиль будет создан с помощью класса, который задан каждому элементу Input. Лейблы будут стилизоваться с помощью селектора input + label, таким образом, им не нужен отдельный класс. А теперь посмотрим на HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="switch"> <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-1"></label> </div> <div class="switch"> <input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat" type="checkbox"> <label for="cmn-toggle-4"></label> </div> <div class="switch"> <input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-7" data-on="Yes" data-off="No"></label> </div> |
Ничего особенного здесь. Что касается CSS, мы хотим, чтобы настоящий флажок был спрятан и не виден на экране. Все задание стилей будет проходить внтури лейбла. Это удобно, так как клик по лейблу поставит или снимет флажок. Вот CSS код, который мы будем реализовывать для всех переключателей:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.cmn-toggle { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle + label { display: block; position: relative; cursor: pointer; outline: none; user-select: none; } |
Всем переключателям понадобится немного математики для корректной работы, но масштабирование в одну и в другую стороны станет очень простым, когда вы немного с ним разбереться. Если вы используете Sass (и любой другой препроцессор), это станет еще легче, потому что вы сможете создать переменные, а затем переопределять их. Как обычно, я буду использовать свойство box-sizing: border-box для все элементов. CSS код представленный ниже (и выше) без префиксов, поэтому убедитесь в том, что вы добавляете префиксы, если вы копируете код из урока. Если вы скачаете исходник, то префиксы уже будут на месте. Без лишних церемоний, давайте перейдем к примерам.
Пример 1 – круглые переключатели
Наш label является контейнером и имеет высоту и ширину. Мы также задаем ему фоновый цвет, который будет симулировать границу для переключателя. Наш элемент :before будет симулировать светло-серую внутреннюю область переключателя, и будет переходить в зеленый.Элемент :after будет самим кругом, который располагается поверх всего остального, и передвигается слева направо по клику. Ему также будет задано свойство box-shadow, для того, чтобы он выделялся на фоне остальных элементов. Мы будем изменять фоновый цвет элемента :before и расположение элемента :after, когда поле ввода будет принмать псевдокласс :checked и все будет иметь плавные переходы. Вот CSS код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
input.cmn-toggle-round + label { padding: 2px; width: 120px; height: 60px; background-color: #dddddd; border-radius: 60px; } input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after { display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: ""; } input.cmn-toggle-round + label:before { right: 1px; background-color: #f1f1f1; border-radius: 60px; transition: background 0.4s; } input.cmn-toggle-round + label:after { width: 58px; background-color: #fff; border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: margin 0.4s; } input.cmn-toggle-round:checked + label:before { background-color: #8ce196; } input.cmn-toggle-round:checked + label:after { margin-left: 60px; } |
Пример 2 – круглые переключатели с плоским оформлением
Это пример очень похож на пример 1, основное различие состоит в эстетической презентации. Он четко подходит к изящному плоскому дизайну современных сайтов, но работает точно также как и пример 1. CSS код будет иметь некоторые изменения в эстетике, все остальное остается прежним. Вот CSS код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
input.cmn-toggle-round-flat + label { padding: 2px; width: 120px; height: 60px; background-color: #dddddd; border-radius: 60px; transition: background 0.4s; } input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after { display: block; position: absolute; content: ""; } input.cmn-toggle-round-flat + label:before { top: 2px; left: 2px; bottom: 2px; right: 2px; background-color: #fff; border-radius: 60px; transition: background 0.4s; } input.cmn-toggle-round-flat + label:after { top: 4px; left: 4px; bottom: 4px; width: 52px; background-color: #dddddd; border-radius: 52px; transition: margin 0.4s, background 0.4s; } input.cmn-toggle-round-flat:checked + label { background-color: #8ce196; } input.cmn-toggle-round-flat:checked + label:after { margin-left: 60px; background-color: #8ce196; } |
Пример 3 – переворачивающиеся переключатели Да/Нет
Теперь мы будем делать нечто другое. Мы будем создавать переворачивающиеся переключатели на CSS. Вид по умолчанию будет серым и иметь надпись «Нет» (или любую другую, что означает состояние со снятым флажком), а затем поставленный флажок будет зеленым и иметь напись «Да». По клику на лейбле, переключатель перевернется на 180 градусов (это 3.142 радиан для вас инженеры!) по своей оси х, обнаруживая свою обратную сторону. Мы будем изменять контент в зависимости от состояния флажка с помощью атрибутов данных. Эти атрибуты данных обозначены в HTML как data-on и data-off, каждый из которых будет отображаться посли псевдо-элементов :after и :before соответственно. Обратите внимание на backface-visibility для элемента :after,которое изначально прячет его обратную сторону, благодаря начальному значению -180 градусов. Вот CSS код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
input.cmn-toggle-yes-no + label { padding: 2px; width: 120px; height: 60px; } input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: #fff; font-family: "Roboto Slab", serif; font-size: 20px; text-align: center; line-height: 60px; } input.cmn-toggle-yes-no + label:before { background-color: #dddddd; content: attr(data-off); transition: transform 0.5s; backface-visibility: hidden; } input.cmn-toggle-yes-no + label:after { background-color: #8ce196; content: attr(data-on); transition: transform 0.5s; transform: rotateY(180deg); backface-visibility: hidden; } input.cmn-toggle-yes-no:checked + label:before { transform: rotateY(180deg); } input.cmn-toggle-yes-no:checked + label:after { transform: rotateY(0); } |
Поддержка браузерами
Для всех этих стилей поддержка браузерами высока. IE8 и ниже не распознает псевдо-класс :checked, поэтому вам нужно будет распознавание функционала, для того, чтобы в IE отображались обычные флажки. CSS переходы не поддерживаются в IE9 и ниже, так что переключатель не будет иметь плавных переходов. Во всем остальном он будет работать аналогично перескакивая из одного положения в другое (что все равно неплохо).
Заключение
Вот и все, симпатичные переключатели на CSS. Эта техника позволяет верстке оставаться семантичной, не добавляет лишних элементов и реализуется на чистом CSS. Конечно, стоит принимать во внимание поддержку браузерами, но нет ничего сложного в том, чтобы добавлять стили для определенных браузеров. Используя примеры выше, вы можете применить множество подходов. Я надеюсь, что вам понравилось и вы узнали что-то новое из этого урока. Скачивайте исходники, посмотрите демо и оставляйте комментарии.
Автор: Nick Salloum
Источник: //speckyboy.com/
Редакция: Команда webformyself.
