Как переключать стили сайта


Переключатель стилей на чистом CSS с помощью :checked

От автора: еще пару лет назад разработчики уже могли создавать множество проектов с помощью одного лишь CSS без применения JavaScript. Но сегодня CSS настолько окреп, что можно писать поистине удивительные вещи без единой строки JavaScripta’а. Скорее всего вы уже читали статьи на тему «способы на чистом CSS», в которых демонстрируется мощь каскадных таблиц стилей.

Когда дело касается чисто CSS методов, мы не можем игнорировать псевдокласс :checked, его я и буду использовать в этой статье. Конечно, я не первый, кто пишет об этом способе, уже велись довольно обширные споры по поводу использования элементов формы в качестве замены JavaScript’у. К примеру, статья с Adobe Louis Lazaris и это замечательное слайд шоу от Ryan Seddon.

Применение :checked

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

Перед тем, как пойти дальше, давайте посмотрим на демо, чтобы понять, что мы будем создавать в этом уроке:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

А теперь можно продолжать.

Создание блока настроек

В демо вы должны были заметить иконку шестеренки и то, как при нажатии на нее появляется блок с параметрами. Перед пояснением того, какой HTML и CSS код лежит за этим, взглянем на следующий код:

/* нам не нужно, чтобы input’ы были видны, нужны только лейблы */ input[type="checkbox"], input[type="radio"] { position: absolute; visibility: hidden; } .settings-box-element { z-index: 10; }

/* нам не нужно, чтобы input’ы были видны, нужны только лейблы */

input[type="checkbox"], input[type="radio"] {

  position: absolute;

  visibility: hidden;

}

 

.settings-box-element {

  z-index: 10;

}

Поскольку нам необходимо отображать только лейблы, то код выше как раз и прячет чекбоксы и радиокнопки. Более того, всем лейблам присвоен класс settings-box-element со свойством z-index , нам нужно, чтобы эти поля всегда оставались поверх страницы.

Теперь мы можем разобраться в коде блока настроек. Начнем с кнопки-шестеренки. Ее код:

HTML

<!—иконка шестеренки, открывает блок при клике на нее --> <input type="checkbox"> <label for="settings-btn"></label>

<!—иконка шестеренки, открывает блок при клике на нее -->

<input type="checkbox">

<label for="settings-btn"></label>

CSS

.settings-btn + label { position: fixed; top: 130px; right: 0; display: block; width: 35px; color: #e83737; text-align: center; background: #fff; cursor: pointer; }

.settings-btn + label {

  position: fixed;

  top: 130px;

  right: 0;

  display: block;

  width: 35px;

  color: #e83737;    

  text-align: center;

  background: #fff;

  cursor: pointer;

}

Если вы читали хоть одну или даже две статьи о том, как использовать элементы формы, чтобы не применять JavaScript, то вы уже знаете, что нужно использовать input’ы вместе с лейблами. А значит, если хоть один удалить, то ничего не сработает. У нас есть чекбокс с id=»settings-btn» и лейбл с атрибутом for, указывающим на значение id. Также я добавил класс settings-btn, чтобы использовать его потом.

В CSS лейбл спозиционирован фиксировано position: fixed с соответствующими значениями top и right. Следом идет белый бокс, якобы содержащий кнопки:

HTML

<!—белый бокс, содержащий кнопки --> <div></div>

<!—белый бокс, содержащий кнопки -->

<div></div>

CSS

.buttons-wrapper { position: fixed; top: 130px; right: -200px; /* должно совпадать со значением ширины */ width: 200px; height: 240px; background: #fff; }

.buttons-wrapper {

  position: fixed;

  top: 130px;

  right: -200px; /* должно совпадать со значением ширины */

  width: 200px;

  height: 240px;

  background: #fff;

}

Наш бокс это пустой DIV с классами «buttons-wrapper» и «settings-box-element». Как я уже говорил выше, последний класс в основном используется для добавления z-index. «buttons-wrapper» нужен чтобы стилизовать сам DIV. И, как вы можете заметить, боксу задана ширина в 200px и высота в 240px. Это чтобы вместились 5 кнопок, можете посмотреть демо. Также задано позиционирование fixed и соответствующие значения right top. Единственное, что стоит отметить, что значение свойства right должно совпадать с шириной блока, но с отрицательным значением (чтобы блок исчез из поля зрения).

Теперь взглянем на код оставшихся 5 кнопок. В комментариях указан фон, к которому относится кнопка:

<!—стили фона --> <!—светлый фон (#eaeaea) --> <input type="radio" name="layout" checked> <label for="light-layout"> Light Background</label> <!—темный фон (#494949) --> <input type="radio" name="layout"> <label for="dark-layout"> Dark Background </label> <!—фон-изображение --> <input type="radio" name="layout"> <label for="image-layout"> Image Background</label> <!— фон-шаблон --> <input type="radio" name="layout"> <label for="pattern-layout"> Pattern Background</label> <!-- показать/спрятать контент--> <input type="checkbox"> <label for="hide-show-content"> Hide/Show content</label>

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

<!—стили фона -->

<!—светлый фон (#eaeaea) -->

<input type="radio" name="layout" checked>

<label for="light-layout">

Light Background</label>

 

<!—темный фон (#494949) -->

<input type="radio" name="layout">

<label for="dark-layout">

Dark Background

</label>

 

<!—фон-изображение -->

<input type="radio" name="layout">

<label for="image-layout">

Image Background</label>

 

<!— фон-шаблон -->    

<input type="radio" name="layout">

<label for="pattern-layout">

Pattern Background</label>

 

<!-- показать/спрятать контент-->

<input type="checkbox">

<label for="hide-show-content">

Hide/Show content</label>

.layout-buttons { display: block; width: 150px; padding: 10px 0; text-align: center; border: 2px solid black; box-sizing: border-box; font-size: 0.875em; cursor: pointer; } .light-layout + label { position: fixed; top: 140px; right: -150px; } .dark-layout + label { position: fixed; top: 185px; right: -150px; } .image-layout + label { position: fixed; top: 230px; right: -150px; } .pattern-layout + label { position: fixed; top: 275px; right: -150px; } .hide-show-content + label { position: fixed; top: 320px; right: -150px; }

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

40

.layout-buttons {

  display: block;

  width: 150px;

  padding: 10px 0;

  text-align: center;

  border: 2px solid black;

  box-sizing: border-box;

  font-size: 0.875em;

  cursor: pointer;

}

 

.light-layout + label {

  position: fixed;

  top: 140px;

  right: -150px;

}

 

.dark-layout + label {

  position: fixed;

  top: 185px;

  right: -150px;

}

 

.image-layout + label {

  position: fixed;

  top: 230px;

  right: -150px;

}

 

.pattern-layout + label {

  position: fixed;

  top: 275px;

  right: -150px;

}

 

.hide-show-content + label {

  position: fixed;

  top: 320px;

  right: -150px;

}

Обратите внимание на то, что первый чекбокс уже отмечен атрибутом «checked». Мы используем его по умолчанию.
Каждый инпут имеет свой id, а каждый лейбл свой for, и они совпадают между собой. И вы можете знать, а может и нет, но весь секрет с атрибутом for в том, что, если мы его используем, то при клике на лейбл с атрибутом for автоматически выбирается чекбокс или радиокнопка. Вот почему мы можем использовать псевдокласс :checked.

Всем лейблам присвоен класс «layout-buttons». Он используется для добавления базовых и общих стилей, как ширина, padding, border и т.д. Другие классы используются для индивидуальной стилизации. Как вы могли заметить, для иконки шестеренки и для белого бокса используется фиксированное позиционирование с определенными значениями top и right. А значение top для каждого лейбла больше на 45px, чем у предыдущего; это нужно, чтобы кнопки стали в столбец, не налегая друг на друга. Также обратите внимание на то, что значение right равняется ширине кнопок, только с отрицательным значением.

Осталась последняя часть CSS кода:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

input[type="radio"]:checked + label { background: #e83737; color: #fff; border-color: #e83737; }

input[type="radio"]:checked + label {

  background: #e83737;

  color: #fff;

  border-color: #e83737;

}

Эти стили используются для замены стилей по умолчанию для лейблов с выбранными радиокнопками (у нас их 4). Я использовал смежные селекторы, чтобы определить из всех инпутов радиокнопки. Свойствам присвоено значение #e83737, цвет #fff.

Ничего сверх сложного. Оставшиеся элементы обернуты DIV’ом.

<div> <div> <h2>Cool stuff with CSS only!</h2> <p>Lorem ipsum dolor sit amet...</p> </div> </div>

<div>

  <div>

    <h2>Cool stuff with CSS only!</h2>

    <p>Lorem ipsum dolor sit amet...</p>

  </div>

</div>

В коде выше я позиционирую каждый элемент блока настроек независимо друг от друга, так что я могу запросто обернуть каждый отдельным DIV’ом и позиционировать их как угодно, сильно упрощает работу. Мы поступили так просто потому, что мы не можем выбрать родительски элемент, только смежный.

Итак, основной контент обернут в div с классом class=»main-wrapper». И, как вы увидите позже, чтобы изменить стили этого DIV’а, нам нужно будет написать что-то похожее:

input[type="checkbox"]:checked ~ main-wrapper { /* стили */ }

input[type="checkbox"]:checked ~ main-wrapper {

  /* стили */

}

Чтобы выбрать главный DIV мы используем селектор ~.

Клик по иконке настроек

По клику должен появляться блок настроек. Код ниже позволяет это сделать:

.settings-btn:checked + label { right: 200px; /* совпадает с шириной .buttons-wrapper */ } .settings-btn:checked ~ .buttons-wrapper { right: 0; } .settings-btn:checked ~ .layout-buttons { right: 30px; }

.settings-btn:checked + label {

  right: 200px; /* совпадает с шириной .buttons-wrapper */

}

 

.settings-btn:checked ~ .buttons-wrapper {

  right: 0;

}

 

.settings-btn:checked ~ .layout-buttons {

  right: 30px;

}

Когда пользователь кликает на иконку настроек, будет выбран чекбокс с id=»settings-btn». После нажатия происходит следующее:

Селектор смежных элементов (+) заставляет лэйблы выезжать на 200px после того, как будут выбраны чекбоксы.

Селектор ~ заставляет выезжать элементы с классами «buttons-wrapper» и «layout-buttons» до значений 0 и 30px соответственно из правого края.

Оба селектора в нашем примере незаменимы, и без них ничего бы не работало.

Замена фона

Я напомню вам HTML радио кнопок:

<!—стили фона --> <!—светлый фон (#eaeaea) --> <input type="radio" name="layout" checked> <label for="light-layout"> Light Background</label> <!—и еще 3 радио кнопки/лейбла -->

<!—стили фона -->

<!—светлый фон (#eaeaea) -->

<input type="radio" name="layout" checked>

<label for="light-layout">

Light Background</label>

<!—и еще 3 радио кнопки/лейбла -->

Мы будем менять фон у элемента .main-wrapper. CSS код:

.light-layout:checked ~ .main-wrapper { background: #eaeaea; } .dark-layout:checked ~ .main-wrapper { background: #494949; } .image-layout:checked ~ .main-wrapper { background: url(image url) no-repeat center 0 fixed; } .pattern-layout:checked ~ .main-wrapper { background: url(images/pattern1.png) repeat; }

.light-layout:checked ~ .main-wrapper {

  background: #eaeaea;

}

.dark-layout:checked ~ .main-wrapper {

  background: #494949;

}

.image-layout:checked ~ .main-wrapper {

  background: url(image url) no-repeat center 0 fixed;

}

.pattern-layout:checked ~ .main-wrapper {

  background: url(images/pattern1.png) repeat;

}

По HTML коду мы имеем 4 набора инпутов типа type=»radio» и 4 лейбла. По клику на любой лейбл будет выбран связанный с ним инпут, а значит сработает псевдокласс :checked. Затем в зависимости от выбранного лейбла будет применен один из четырех стилей к блоку-обертке.

Прячем/показываем контент

Я использую чекбокс для отображения и скрытия контента:

<!-- показать/скрыть контент --> <input type="checkbox"> <label for="hide-show-content"> Hide/Show content</label>

<!-- показать/скрыть контент -->

<input type="checkbox">

<label for="hide-show-content">

Hide/Show content</label>

.hide-show-content:checked ~ .main-wrapper .content { display: none; }

.hide-show-content:checked ~ .main-wrapper .content {

  display: none;

}

В этом случае, когда пользователь кликает на соответствующий лейбл, тем самым выбирая чекбокс, мы даем браузеру команду выбрать элемент с классом class=»content» и установить значение display: none.

Заключение

Существует множество способов применения псевдоклассов, и ограничиваются они лишь вашей находчивостью. Если же для вас такой подход что-то новое, надеюсь, эта статья послужит отправной точкой в экспериментах с возможностями псевдоклассов. Ниже вы можете взглянуть на демо:

Автор: Omar Wraikat

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Как переключить таблицу стилей CSS с помощью jQuery?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

59 Тумблеры CSS

Коллекция отобранных вручную бесплатных HTML и CSS примеров кода . Обновление июньской коллекции 2019 года. 25 новинок.

  1. Флажки CSS
  2. Кнопки радио CSS
  3. Тумблеры jQuery
Автор
  • Аарон Икер
О коде

Переключатель нейморфизма CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Аарон Икер
О коде

CSS Переключатель яиц

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Неуморфный переключатель

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Омерджан Баланды
О коде

Переключатель датчика уровня топлива на чистом CSS

E 1/2 F, чистый CSS переключатель указателя уровня топлива щелкните датчик, чтобы включить индикатор.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Оливия Нг
О коде

Переключает

Вы хотите, чтобы ваш переключатель был красивым или функциональным?

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Андреас Сторм
О коде

Переключить

Переключатель / флажок без метки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Милан Раринг
О коде

Анимация выключателя питания

Простая анимация выключения питания.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Аарон Икер
О коде

Плоский переключатель CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Аарон Икер
О коде

CSS Переключатель сердца

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • CodeMeNatalie
О коде

Флажок тумблера

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Гималаи Сингх
О коде

Подписаться Toggle Button

Кнопка переключения подписки с изображением мема «Smudge, The Confused Cat» из известного мема «Женщина кричит на кошку».

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • CodeMeNatalie
О коде

Переключатель из квадрата в круг

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Аарон Икер
О коде

Переключатель громкости CSS Switch

Переход включения / выключения звука.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Аарон Икер
О коде

Простой переключатель / переключатель CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Аарон Икер
О коде

Простой переключатель / переключатель CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • ул. ДарынПьер
О коде

Antsy Toggles

Переключает, что немного беспокоит ...

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Ахмад Эмран
О коде

Флажок Переключатель CSS - дневной / ночной режим

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Гарет МакКинли
О коде

Переключатель анимированного CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Тумблер для игрушек

Как может выглядеть тумблер на продукте Little Tikes, учитывая пластиковый вид?Рукоятка должна напоминать двухцветный шар.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Анимация флажков на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Переключатель день / ночь

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Гималаи Сингх
О коде

Сбивающая с толку кнопка переключения

Запутанная кнопка-переключатель / тумблер с использованием HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Ползунок флажка на чистом CSS

Многие люди используют JS для изменения текста, но вам это не нужно.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • @keyframers
О коде

Флажок Переключить анимацию

Чистый CSS флажок для переключения анимации.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Флорин Поп
О коде

Переключатель радиального эффекта

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Переключатель сетки CSS

Новый взгляд на переключатель CSS с использованием анимации сетки CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Дарин Сен-Пьер
О коде

Простые ручки-переключатели

HTML и CSS простые круглые переключатели.

Совместимые браузеры: Chrome, Firefox (частично), Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Чинту Ядав Сара
О коде

Gender Toggle Чистый CSS

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Маркус Коннор
О коде

Кулисный переключатель флажка

HTML-элемент формы флажка, стилизованный под многопозиционный переключатель.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Гжегож Витчак
О коде

Переключатель лампы на чистом CSS

Переключатель лампочки на чистом HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Аарон Икер
О коде

Анимация переключения

Переключение анимации в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Аарон Икер
О коде

Анимация переключателя блокировки

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Кнопки переключения

Интереснее, чем скучный флажок.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Гималаи Сингх
О коде
Кнопки переключения

Pure CSS | Двухпозиционные переключатели

Коллекция тумблеров / переключателей, которые можно практически использовать на веб-сайте.Создан с использованием CSS без использования JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Зед Даш
О коде

Переключатели (флажки)

Тумблеры HTML и CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Переключатель качания

Переключатель качания на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Гималаи Сингх
О коде

Тумблеры / переключатели

Кнопка переключения дня и ночи, эластичная кнопка переключения или двухпозиционные переключатели.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Demo image: Totoro Toggle
О коде

Тоторо Toggle

Очень красивый и простой Тоторо тумблер .

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: -

Demo image: Toggle
Автор
  • Андреас Сторм
О коде

Переключить

Анимированный на чистом CSS toggle switch.

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: -

Demo image: Cold-Hot Toggle Switch
О коде

Тумблер холодный-горячий

Вероятно, концепция тумблера , которую никто раньше не пробовал. Это для температуры - варианты холодные или горячие. Идея состоит в том, чтобы изобразить ручку в виде кубика льда для холода и пламени для горячего. Для горячего куб движется вправо и одновременно тает, а вместе с ним движется восходящее пламя.В случае холода вода снова превращается в куб при движении влево, а пламя гаснет, двигаясь вместе с ним.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: -

Demo image: CSS Bear Toggle
Автор
  • Анастасия Гудвин
О коде

CSS Переключатель медведя

Милый мишка toggle .

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: Normalize.css

Demo image: Pure CSS Elastic Toggle
О коде

Эластичный рычаг

Эластичный переключатель на чистом CSS .

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: Google Fonts

Demo image: Sub/Sup Toggle
О коде

Переключатель Sub / Sup

Переключатель Sub и sup .

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: -

Demo image: Toggle
Автор
  • Кэтрин Като
О коде

Переключить

Toggle включает чистый CSS.

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: -

Demo image: Realistic Toggle Button
Сделано с
  • HTML (мопс) / CSS (SCSS) / JavaScript
О коде

Реалистичная кнопка переключения

HTML и CSS реалистичная кнопка переключения с небольшим количеством JavaScript.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: -

Demo image: Implementation of Liquid button
Сделано с
  • HTML (мопс) / CSS (SCSS) / JavaScript
О коде

Реализация кнопки Liquid

Переход между включенным и выключенным состояниями.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: -

Demo image: Another Toggle
Автор
  • Маккензи Боббит
О коде

Другой переключатель

Переключатель Cool HTML и CSS .

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: Google Fonts

О коде

Минимальный переключатель на чистом CSS

Переключение с помощью только CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Demo image: Pure CSS Day And Night Toggle
Автор
  • Бенджамин Реторе
О коде

Переключение дня и ночи на чистом CSS

Awesome HTML и CSS переключатель дня и ночи .

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: Google Fonts

Demo image: Simple Toggle
Автор
  • магнификод
О коде

Простой переключатель

Кнопка простого переключения .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

Demo image: Flat Toggle Switch
Автор
  • Феликс Де Монтис
О коде

Плоский тумблер

Плоский тумблер Pure CSS .

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: -

Demo image: Kitty Toggle
О коде

Котенок Переключатель

Простой флажок Переключатель улучшен, превратившись в кота.

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: -

Demo image: Pure CSS Toggles
Автор
  • Рафаэль Гонсалес
О коде

Чистый CSS переключает

Чистый CSS переключает : плоский вид, трехмерный вид.

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: -

Demo image: Pure CSS Day/Night Toggle Swith
Автор
  • Джейсон Дикс
О коде

Переключатель день / ночь на чистом CSS

Dribbble переработка исходного выстрела: https://dribbble.com/shots/1

3-Day-Night-Toggle-Button

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: -

Demo image: SVG Switches - Design
Автор
  • MaxStalker
О коде
Коммутаторы

SVG - Дизайн

HTML / CSS переключает дизайн с SVG.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: -

Demo image: Skew Switch
Автор
  • Абхиджит Хота
Сделано с
  • HTML (Haml) / CSS (SCSS) / JavaScript
О коде

Переключатель перекоса

Nice переключатель перекоса .

Совместимые браузеры: Chrome (частично), IE (частично), Edge (частично), Firefox, Opera (частично), Safari (частично)

Зависимости: jQuery

Demo image: CSS Switch
Автор
  • Рэнди Лебо
О коде

Переключатель CSS

Переключить переключатель с анимацией CSS .

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: jQuery

Demo image: iOS 7 Toggle
Автор
  • Даниэль Иден
О коде

Переключить iOS 7

Только CSS / HTML воссоздание кнопок переключения iOS 7 .

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: Modernizr.js

Demo image: Switches
Автор
  • Билли Крист
О коде

Переключатели

Первые 2 имеют глубину и освещение, а 3-й спроектирован ровно с несколько «липким» переходом на нем.

Совместимые браузеры: Chrome, IE, Edge, Firefox, Opera, Safari

Зависимости: -

.

Заявление о переключении JavaScript


Оператор switch используется для выполнения различных действий в зависимости от различных условий.


Заявление о переключении JavaScript

Используйте оператор switch , чтобы выбрать один из множества кодовых блоков для выполнения.

Синтаксис

переключатель ( выражение ) {
case x :
// кодовый блок
break;
case y :
// кодовый блок
break;
по умолчанию:
// кодовый блок
}

Вот как это работает:

  • Выражение переключения вычисляется один раз.
  • Значение выражения сравнивается со значениями для каждого случая.
  • Если есть совпадение, выполняется связанный блок кода.
  • Если совпадений нет, выполняется блок кода по умолчанию.

Пример

Метод getDay () возвращает день недели как число между 0 и 6.

(воскресенье = 0, понедельник = 1, вторник = 2 ..)

В этом примере для вычисления названия дня недели используется номер дня недели:

переключатель (новая дата ().getDay ()) {
case 0:
day = "воскресенье";
перерыв;
case 1:
day = "понедельник";
перерыв;
case 2:
day = "вторник";
перерыв;
case 3:
day = "среда";
перерыв;
case 4:
day = "четверг";
перерыв;
case 5:
day = "пятница";
перерыв;
case 6:
day = "суббота";
}

Результат дня будет:

Попробуй сам "

Разрыв Ключевое слово

Когда JavaScript достигает , разрыв ключевое слово, оно выходит из блока переключателя.

Это остановит выполнение внутри блок.

Последний корпус в блоке переключателя ломать не нужно. Блок все равно там ломается (кончается).

Примечание: Если вы опустите оператор break, следующий регистр будет выполнен, даже если оценка не соответствует случаю.


Ключевое слово по умолчанию

Ключевое слово по умолчанию определяет код для запуска, если нет совпадение регистра:

Пример

Метод getDay () возвращает день недели как число между 0 и 6.

Если сегодня ни суббота (6), ни воскресенье (0), напишите сообщение по умолчанию:

переключатель (новая дата (). getDay ()) {
case 6:
text = "Сегодня суббота";
перерыв;
case 0:
text = "Сегодня воскресенье";
перерыв;
по умолчанию:
text = "С нетерпением жду выходных";
}

Результат текста будет:

Попробуй сам "

Случай по умолчанию не обязательно должен быть последним регистром в коммутаторе блок:

Пример

переключатель (новая дата ().getDay ()) {
по умолчанию:
text = "С нетерпением жду выходных";
перерыв;
корпус 6:
text = "Сегодня суббота";
перерыв;
case 0:
text = "Сегодня воскресенье";
}

Попробуй сам "

Если default - не последний регистр в блоке переключения, не забудьте закончить регистр по умолчанию перерывом.


Общие кодовые блоки

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

В этом примере 4 и 5 совместно используют один и тот же блок кода, а 0 и 6 совместно используют другой блок кода:

Пример

переключатель (новая дата (). getDay ()) {
case 4:
case 5:
text = "Скоро выходные";
перерыв;
case 0:
case 6:
text = "Сейчас выходные";
перерыв;
по умолчанию:
text = "С нетерпением жду выходных";
}

Попробуй сам "

Сведения о переключении

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

Если подходящих вариантов не найдено, программа переходит к метке по умолчанию .

Если метка по умолчанию не найдена, программа переходит к оператору (операторам) после переключателя .


Строгое сравнение

В корпусах коммутаторов используется строгое сравнение и (===).

Для соответствия значения должны быть одного типа.

Строгое сравнение может быть истинным, только если операнды одного типа.

В этом примере совпадения для x:

не будет

Пример

var x = "0";
переключатель (x) {
case 0:
text = "Off";
перерыв;
case 1:
text = "Вкл.";
перерыв;
по умолчанию:
text = "Значение не найдено";
}

Попробуй сам "


.

css - Как изменить стиль div при переключении на другую страницу в html?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий