Всем привет! Недавно начал сильно увлекаться CSS3 и скажу вам, что это идеальная площадка для творчества сообразительных людей. Особенно нравится проектировать и создавать элементы пользовательского интерфейса, такие как кнопки, переключатели и т.д. В этом уроке я покажу вам как может выглядеть стилизация checkbox используя только CSS, без единой строчки Javascript.
Уточню несколько вещей перед началом.
Вы не увидите никаких префиксов в CSS фрагментах, но вы конечно найдете их в файлах.
Не будет много переходов между состояниями переключателей, так как буду часто использовать псевдо-элементы, чтобы уменьшить количество элементов до минимума, на заметку, только Firefox поддерживает переходы и анимацию в псевдо-элементах.
Для отображения использую бокс-модель, где [ширина] = [ширина элемента] + [отступы] + [границы]. Этот вы можете увидеть в фрагменте кода:
*,
*:after,
*:before {
box-sizing: border-box;
}
Мой метод позволяет обрабатывать переключения кнопок на чистом CSS. Он опирается на сам флажок (который либо выбран или не выбран), псевдо-селектор :checked и соседние селекторы (~ или +). В принципе, можно сказать, "если флажок установлен, то Х элемент ведет себя следующим образом".
Старый способ предполагал наличие флажка с ID, и метки(label) с атрибутом "for", вызывающим ID флажка. Этот метод позволял скрывать флажок и получать доступ к нему, нажимая на label (метку). Единственная проблема такого подхода в том, что Mobile Safari не поддерживает его.
Так что придется пойти обходным путем: сделать флажок невидимым через свойство непрозрачности (opacity), установить его поверху любого приглянувшегося нам элемента (я до сих пор использую label), и вот мы видим - при нажатии на элемент, мы на самом деле нажимаете флажок! Код выглядит следующим образом:
.switch input {
/* Делаем его на всю ширину контейнера */
position: absolute;
width: 100%;
height: 100%;
/ * Затем мы ставим его выше всего остального * /
z-index: 100;
/ * Наконец, мы делаем его невидимым * /
opacity: 0;
/ * Этот просто для эргономики:) * /
cursor: pointer;
}
Эти 8 строчек кода будут использоваться во всех последующих демонстрациях, так что можете смело копировать его, он никогда не меняется.
Как обычно, детально рассмотрю один из вариантов отображения переключателей, а именно Демо 4, остальные варианты - домашнее задание:)
Демо 4
В данном примере буду использовать шрифтовые иконки Font Awesome, поэтому должно получится что-то воистину интересное:)
HTML
<div class="switch">
<input type="checkbox">
<label><i class="icon-off"></i></label>
</div>
CSS
Я не буду описывать здесь все возможности шрифтовых иконок Font Awesome, так как уверен, что это уже было описано в множестве других статей, а также, вероятно, вы все уже использовали эту "css-библиотеку" раньше. Просто убедитесь, что указали правильные пути к нужным файлам. Итак, давайте начнем с основ: скрываем флажок и изменяем размеры контейнера:
.switch {
width: 150px;
height: 150px;
position: relative;
}
Теперь, давайте позаботимся о лейбле, который лежит в основе нашей большой кнопки. Обратите внимание, что добавил несколько стилей шрифта здесь. Но на самом деле ничего нового, градиент и тени для красивого эффекта:
.switch label {
display: block;
width: 100%;
height: 100%;
position: relative;
color: #a5a39d;
font-size: 70px;
text-align: center;
line-height: 115px;
text-shadow: 0 2px 1px rgba(0,0,0,0.25);
border-radius: 50%;
background: #b25244;
background: linear-gradient(#f7f2f6, #b2ac9e);
transition: all 0.3s ease-out;
z-index: -1;
box-shadow:
inset 0 2px 3px rgba(255,255,255,0.13),
0 5px 8px rgba(0,0,0,0.3),
0 10px 10px 4px rgba(0,0,0,0.3);
}
Теперь использую оба псевдо-элемента лейбла, чтобы сделать крутой эффект размытия при переключении.
.switch label:before {
content: "";
position: absolute;
left: -10px;
right: -10px;
top: -10px;
bottom: -10px;
z-index: -1;
border-radius: inherit;
box-shadow: inset 0 10px 10px rgba(0,0,0,0.13);
-webkit-filter:blur(1px);
filter: blur(1px);
}
.switch label:after {
content: "";
position: absolute;
left: -20px;
right: -20px;
top: -20px;
bottom: -20px;
z-index: -2;
border-radius: inherit;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.3),
0 0 10px rgba(0,0,0,0.15);
}
Хорошо, давайте сделаем что-то с нашим элементом, тегом <i>, класс "icon-off". В шрифтовых иконках Font Awesome псевдо-элемент :before используется для показа значка, поэтому мы не можем его использовать.
Но можно использовать псевдо-элемент :after, так как надо что-то сделать с верхней частью нашей кнопки. Как обычно, зададим градиент, тени, и 1px размытия, чтобы сделать их более гладкими.
.switch .icon-off:after {
content: "";
display: block;
position: absolute;
width: 70%;
height: 70%;
left: 50%;
top: 50%;
z-index: -1;
margin: -35% 0 0 -35%;
border-radius: 50%;
background: #d2cbc3;
background: linear-gradient(#cbc7bc, #d2cbc3);
box-shadow:
0 -2px 5px rgba(255,255,255,0.05),
0 2px 5px rgba(255,255,255,0.1);
-webkit-filter:blur(1px);
filter: blur(1px);
}
И теперь, проверяем состояние. Довольно просто: значок светится зеленым, а кнопка выглядит нажатой:
.switch input:checked ~ label {
color: #9abb82;
box-shadow:
inset 0 2px 3px rgba(255,255,255,0.13),
0 5px 8px rgba(0,0,0,0.35),
0 3px 10px 4px rgba(0,0,0,0.2);
}
Итог
Как видно с описаний и кода, не так страшен черт как его рисуют:) Есть небольшое замечание, если по каким-то причинам ваш браузер просто отказывается понимать фильтр :checked, воспользуйтесь следующей структурой:
.switch:not(:checked) label {
/* Стили для label */
}
.switch:not(:checked) input {
/* Стили для input */
}
Спасибо за просмотр урока! Если у вас есть какие-либо вопросы по данной теме или примеры работ, всегда рад:) Подписывайтесь на наш канал на youtube и в группу вконтакте, скоро будет еще больше интересного!) До скорых встреч)