От автора: вы часто используете переключатели-слайдеры в качестве модной альтернативы чекбоксам. Сегодня мы создадим один из них с помощью простого CSS3 и HTML.
Замечательный переключатель будет создан без единой строчки на JavaScript, мы используем исключительно возможности CSS3. Итак, приступим…
Шаг 1: Начните с разметки
Создайте новый документ HTML и добавьте тэг span с классом toggle-bg. Это будет фоновая область переключателя.
|
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 |
<!DOCTYPE html> <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="author" content=""> <!—Не забудьте метатэг Viewport //enva.to/A79s3G --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- CSS --> <link rel="stylesheet" href="your_stylesheet.css"> </head> <body> <span class="toggle-bg"></span> </body> </html> |
Шаг 2: Семантика и функциональность
Чтобы переключатель стал функционировать, мы применим несколько невидимых input-ов типа radio. Для них необходима всего пара требований:
У них должны быть разные значения
У них должно быть одинаковое имя
В качестве значений я буду применять вкл/on и выкл/off и имя toggle, но в зависимости от применения их можно менять. Например, может быть, вы станете переключать между да/yes и нет/no.
Добавьте input-ы в ранее созданный span. Ваш код должен выглядеть так:
|
1 2 3 4 |
<span class="toggle-bg"> <input type="radio" name="toggle" value="off"> <input type="radio" name="toggle" value="on"> </span> |
В зависимости от вашего случая может понадобиться поместить все это внутри формы.
Шаг 3: Тумблер
Маленькая окружность, которая сама по себе будет тумблером-переключателем – это просто span, стили которому мы назначим позже. Назначьте span-у класс switch и вставьте его после input-ов.
Вот ваша окончательная разметка HTML:
|
1 2 3 4 5 |
<span class="toggle-bg"> <input type="radio" name="toggle" value="off"> <input type="radio" name="toggle" value="on"> <span class="switch"></span> </span> |
Шаг 4: Назначьте стили фону
Чтобы все упростить, начнем с самого минимума, требующегося для того, чтобы переключатель заработал. Добавьте в свой документ CSS (или в элемент style, если применяете встроенный CSS) следующее.
|
1 2 3 4 5 6 7 8 |
.toggle-bg{ background: #222; /* Вам понадобится видеть область с тумблером, но не стесняйтесь изменить цвет */ display: block; /* ...Чтобы можно было установить высоту и ширину */ float: left; /* ...Чтобы он не занимал всю ширину страницы */ height: 7px; /* Если хотите, можно это попозже изменить */ position: relative; /* Требуется, чтобы тумблер мог передвигаться */ width: 26px; /* Это тоже можно позже изменить */ } |
Шаг 5: Невидимые input-ы
Input-ы нужно позиционировать абсолютно, а затем слегка сдвинуть, чтобы они правильно подходили. Затем мы переключим их непрозрачность opacity на 0.
|
1 2 3 4 5 6 7 8 9 10 11 |
.toggle-bg input{ height: 28px; left: 0; margin: 0; /* Сбросьте поля и отступ */ opacity: 0; /* Невидим! */ padding: 0; position: absolute; top: -10px; /* Сдвиньте по вертикали */ width: 36px; z-index: 2; /* Нам нужно, чтобы вход input находился сверху span.switch, которому мы назначим z-index в 1 */ } |
Шаг 6: Тумблер
Тумблер должен быть квадратным, чтобы можно было позже закруглить его в идеальную окружность с помощью border-radius. Ему нужно относительное позиционирование, чтобы его можно было передвигать, а так как нам нужно назначить ему высоту (height) и ширину (width), он будет элементом уровня block, смещенным влево (float:left).
|
1 2 3 4 5 6 7 8 9 10 11 |
.switch{ background: #ccc; display: block; float: left; height: 14px; left: -1px; /* Это – начальная точка. При добавлении border radius немного виден фон, если использовать left: 0;, поэтому лучше всего применить -1px.*/ position: relative; top: -4px; /* ...Чтобы отцентрировать его по вертикали */ width: 14px; z-index: 1; /* Помните, он должен быть под невидимыми input-ами */ } |
Шаг 7: Хаки CSS!
CSS3 добавил новый общий комбинатор сиблингов (элементов одного уровня), селектор, применяющий tilde (~) для отбора элементов, разделяющих один и тот же родительский элемент. Порядок, в котором они появляются в CSS (до или после tilde), отражает тот порядок, в котором они появляются в DOM.
У нас также имеется доступ к новому псевдоклассу :checked. Он даст нам возможность в отдельности выбрать проверяемый radio input (в настоящее время невидимый).
Во-первых, мы применим эти селекторы для перезапуска исходного положения тумблера.
|
1 |
.toggle-bg input:checked~.switch{ left: -1px; } /* Исходная позиция тумблера */ |
Далее мы передадим браузеру окончательную позицию переключателя.
|
1 |
.toggle-bg input~:checked~.switch{ left: 13px; } /*окончательная относительная позиция переключателя */ |
Наконец, мы поставим :checked input за непроверенный input и тумблер так, чтобы можно было щелкнуть мышью на второй input.
|
1 |
.toggle-bg input:checked{ z-index: 0; } |
К данному моменту все должно смотреться так:
Шаг 8: Созданное до сих пор
Вот полный 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 |
.toggle-bg{ background: #222; /* Вам понадобится видеть область с тумблером, но не стесняйтесь изменить цвет */ display: block; /* ...Чтобы можно было установить высоту и ширину */ float: left; /* ...Чтобы он не занимал всю ширину страницы */ height: 7px; /* Если хотите, можно это попозже изменить */ position: relative; /* Требуется, чтобы тумблер мог передвигаться */ width: 26px; /* Это тоже можно позже изменить */ } .toggle-bg input{ height: 28px; left: 0; margin: 0; /* Сбросьте поля и отступ */ opacity: 0; /* Невидим! */ padding: 0; position: absolute; top: -10px; /* Сдвиньте по вертикали */ width: 36px; z-index: 2; /* Нам нужно, чтобы вход input находился сверху span.switch, которому мы назначим z-index в 1 */ } .switch{ background: #ccc; display: block; float: left; height: 14px; left: -1px; /* Это – начальная точка. При добавлении border radius показывается немного фона, если использовать left: 0;, поэтому лучше всего применить -1px.*/ position: relative; top: -4px; /* ...Чтобы отцентрировать его по вертикали */ width: 14px; z-index: 1; /* Помните, он должен быть под невидимыми входами inputs */ } .toggle-bg input:checked~.switch{ left: -1px; } /* Исходная позиция тумблера */ .toggle-bg input~:checked~.switch{ left: 13px; } /* окончательная относительная позиция переключателя */ .toggle-bg input:checked{ z-index: 0; } |
Шаг 9: Border Radius’ы
У вас сейчас получился глуповатый квадратный слайдер, поэтому давайте округлим его! Мы добавим border-radius в 8px в span с классом toggle-bg и в span с классом switch.
|
1 |
border-radius: 8px; |
Примечание: Так как далее следуют opacity и transition, я здесь ради учебника не пользуюсь никакими префиксами, но вам для совместимости со старыми браузерами они понадобятся.
Шаг 10: Переходы
Transition (переходы) следует добавить в span с классом switch. Не стесняйтесь подгонять установки. Left: — это единственная часть следующего перехода, которую нельзя менять.
|
1 |
transition: left .2s ease; |
Шаг 11: Фон, тени, градиенты…
Теперь, когда вся функциональность уже готова, все можно подогнать под себя, как вам нравится. Можно добавить тень блока и градиент фона в span с классом toggle-bg или в тумблер. Так как он круглый, на нем самом будут лучше смотреться радиальные градиенты.
Вот мои настройки, но, пожалуйста, измените их так, чтобы они соответствовали вашему стилю и вашему проекту.
Назначьте body беловатый фон и поле, чтобы переключатель был не совсем в углу:
|
1 2 3 4 |
body{ background: #f6f8f9; margin: 200px; } |
Добавьте в стили для .toggle-bg следующее:
|
1 2 |
background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); box-shadow: 0 1px 0 #fff, inset 0 0 2px #d7dee3, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3; |
Добавьте в стили для .switch следующее:
|
1 2 |
background: radial-gradient(ellipse at center, #ffffff 0%,#fefefe 50%,#fdfdfd 51%,#ffffff 100%); box-shadow: 0 1px 1px #65727b, 0 0 1px #b6bdc2; |
Шаг 12: Переключатели iOS
Для стиля переключателя iOS, где тумблер того же размера, что его фон, смените в стиле для .switch следующее:
|
1 2 3 |
height: 30px; top: 0; width: 30px; |
Измените окончательное положение переключателя на left 41 px:
|
1 |
.toggle-bg input~:checked~.switch{ left: 41px; } |
Измените размеры input-ов и удалите сдвиг по вертикали, изменив в стилях для .toggle-bg input следующее:
|
1 2 3 |
height: 30px; top: 0; width: 70px; |
Измените все border radius на 30px вместо 8px.
Подсказка: следите, чтобы значение border-radius было равно высоте (height) изменяемого элемента.
И, наконец, измените height и width элемента .toggle-bg, чтобы те подходил к измененным элементам:
|
1 2 |
height: 30px; width: 70px; |
Заключение
Поздравляю! Теперь вы умеете создавать переключатели без JavaScript’а с помощью небольшого количества классного нового CSS3. Вам, возможно, захочется изменить фоновые градиенты и, к счастью, в этом вам может помочь великолепный онлайн-инструмент; посмотрите бесплатный редактор градиентов Colorzilla. Аналогично работает и приложение к Mac под названием Gradient.
Браузерная поддержка
Так как этот метод основан на некоторых совершенно новых свойствах CSS3, старые браузеры не поддерживаются. Браузерная поддержка псевдокласса :checked включает следующее:
Все версии Chrome
Все версии Firefox
Internet Explorer 9+
Opera 9+
Safari 3+
А следующие браузеры поддерживают общий комбинатор сиблингов:
Все версии Chrome
Все версии Firefox
Internet Explorer 7+
Opera 9+
Safari 3+
jsFiddle
Я создал три jsFiddle’а, чтобы вы могли поэкспериментировать сами. Первый включает самый минимум CSS, который вам понадобится для работы слайдера-«ползунка» переключателя. Второй, более блестящий, включает все, начиная с первого, плюс несколько дополнительных стилей и переходов. Последний – это тот, который я называю «переключателем в стиле iOS», где, как в переключателях в iOS, высота тумблера равна высоте фона переключателя.
Так как все это CSS, можно создать довольно много вариаций. Вот несколько для начала:
Создайте вертикальный, а не горизонтальный переключатель (может быть, для эквалайзера?)
Примените изображение с угловым градиентом, как у фона тумблера, чтобы добиться более реалистичного металлического вида.
Внутрь большого переключателя добавьте метку label.
Используйте jQuery для того, чтобы изменить фон .toggle-bg, когда отмечается дочерний input. Или, даже лучше, выясните, возможно ли это с помощью одного лишь CSS.
Добавьте метку label к каждому input-у внутри переключателя iOS и избирательно показывайте и скрывайте метки label с помощью jQuery.
Примечание: при создании метки label для radio input переключателя вам понадобится JavaScript для отображения и скрытия неактивных меток input-ов, если хотите, чтобы можно было применять метку label как способ снятия отметки с input. Иначе будет возможно только отметить (а не снять отметку) input, нажав на метку label.
Надеюсь, этот учебник оказался вам полезен. Спасибо за прочтение!
Автор: Sebastian Sandqvist
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (3)