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

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

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

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

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

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

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

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

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

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

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

.settings-box-element {
  z-index: 10;
}

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

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

HTML

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

CSS

.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 class="buttons-wrapper settings-box-element"></div>

CSS

.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 id="light-layout" class="light-layout" type="radio" name="layout" checked>
<label for="light-layout" class="layout-buttons settings-box-element">
Light Background</label>

<!—темный фон (#494949) -->
<input id="dark-layout" class="dark-layout" type="radio" name="layout">
<label for="dark-layout" class="layout-buttons settings-box-element">
Dark Background
</label>

<!—фон-изображение -->
<input id="image-layout" class="image-layout" type="radio" name="layout">
<label for="image-layout" class="layout-buttons settings-box-element">
Image Background</label>

<!— фон-шаблон -->    
<input id="pattern-layout" class="pattern-layout" type="radio" name="layout">
<label for="pattern-layout" class="layout-buttons settings-box-element">
Pattern Background</label>

<!-- показать/спрятать контент-->
<input id="hide-show-content" class="hide-show-content" type="checkbox">
<label for="hide-show-content" class="layout-buttons settings-box-element">
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;
}

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

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

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

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

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

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

<div class="main-wrapper">
  <div class="content">
    <h1>Cool stuff with CSS only!</h1>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</div>

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

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

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;
}

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

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

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

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

Замена фона

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

<!—стили фона -->
<!—светлый фон (#eaeaea) -->
<input id="light-layout" class="light-layout" type="radio" name="layout" checked>
<label for="light-layout" class="layout-buttons settings-box-element">
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;
}

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

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

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

<!-- показать/скрыть контент -->
<input id="hide-show-content" class="hide-show-content" type="checkbox">
<label for="hide-show-content" class="layout-buttons settings-box-element">
Hide/Show content</label>
.hide-show-content:checked ~ .main-wrapper .content {
  display: none;
}

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

Заключение

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

Автор: Omar Wraikat

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree