30 января 2016
4758
cтилизация checkbox, псевдо-элементы, css3, cтилизация checkbox на css

Стилизация checkbox

CSS
Демонстрация » Скачать »

Всем привет! Недавно начал сильно увлекаться 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 и в группу вконтакте, скоро будет еще больше интересного!) До скорых встреч)