Веб-дизайнеру
Веб-разработчику
Дополнительно
Кнопка вкл/выкл (чекбокс/checkbox) на CSS3
Скачать
Демо
↓ Также Вам будет интересно ↓
Любому сайту может пригодится переключатель, кнопка вкл/выкл. Давайте сегодня создадим что-то крутое 
. Это одна из прекрасных дизайнерских разработок Петра Квятковского. Ещё один из примеров его прекрасных работ, в статье “CSS чекбокс с привлекающим эффектом”. Выглядит солидно и современно, не так ли? На самом деле это обычный css чекбокс, который мы стилизуем и превратим в прекрасную юзабельную кнопочку. Готовую кнопку можно скачать по ссылку выше. Начнем!
HTML структура
Для этого переключателя, нам нужен дополнительный элемент. Давайте используем, что-то вроде i .
|
1 2 3 4 |
<div class="switch"> <input type="checkbox"> <label><i></i></label> </div> |
Вот, в принципе, и вся его структура, довольно простая. Но без стилей это просто чекбокс, поэтому стилизуем его.
CSS стили
Итак, мы скрываем сам флажок, и как всегда устанавливаем размеры кнопки для switch.
|
1 2 3 4 5 |
.switch { width: 180px; height: 50px; position: relative; } |
И сейчас мы сделаем следующее: label будет контейнером для переключателя. Тег i будет фактическим переключателем. Поэтому ярлык label будет в темно-сером фоне с тенями, не более того. Все остальное сделают псевдо-элементы.
|
1 2 3 4 5 6 7 8 9 10 11 |
.switch label { display: block; width: 100%; height: 100%; position: relative; background: #a5a39d; border-radius: 40px; box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5); } |
Мы даем ему хороший градиент, и некоторые конфетные тени box-shadow.
|
1 2 3 4 5 6 7 8 9 10 11 |
.switch label:after { content: ""; position: absolute; z-index: -1; top: -8px; right: -8px; bottom: -8px; left: -8px; border-radius: inherit; background: #ccc; /* Fallback */ background: linear-gradient(#f2f2f2, #ababab); box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.25); } |
Этот псевдо-элемент предназначен для создания мягкой обводки вокруг кнопки, так что, как обычно, мы будем использовать градиент и тени. Также добавим небольшое расширение для Chrome с использованием фильтра размытия, чтобы эффект был еще более мягким.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.switch label:before { content: ""; position: absolute; z-index: -1; top: -18px; right: -18px; bottom: -18px; left: -18px; border-radius: inherit; background: #eee; /* Fallback */ background: linear-gradient(#e5e7e6, #eee); box-shadow: 0 1px 0 rgba(255,255,255,0.5); -webkit-filter: blur(1px); /* Smooth trick */ filter: blur(1px); /* Future-proof */ } |
Теперь, у нас есть действительно красивая рамка для кнопки-переключатель. Давайте наконец займемся самим чекбоксом, правда?
Мы превращаем его в блочный элемент с помощью display, даем ему высоту своего родителя и немного больше, чем половина его ширины. Мы поместим его слева от контейнера, и дадим ему некоторые интересные стили (тени и градиенты), а именно:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.switch label i { display: block; height: 100%; width: 55%; position: absolute; left: 45%; top: 0; z-index: 2; border-radius: inherit; background: #b2ac9e; /* Fallback */ background: linear-gradient(#f7f2f6, #b2ac9e); box-shadow: inset 0 1px 0 white, 0 0 8px rgba(0,0,0,0.3), 0 5px 5px rgba(0,0,0,0.2); } |
Этот первый псевдо-элемент используется для повышения эстетики: он добавляет изогнутый эффект переключения. Мы размещаем его в середине, и добавляем градиент сверху вниз.
|
1 2 3 4 5 6 7 8 9 10 11 |
.switch label i:after { content: ""; position: absolute; left: 15%; top: 25%; width: 70%; height: 50%; background: #d2cbc3; /* Fallback */ background: linear-gradient(#cbc7bc, #d2cbc3); border-radius: inherit; } |
Второй псевдо-элемент, это слово “ВКЛ” или “ВЫКЛ”, в зависимости от состояния кнопки. Мы используем свойство content, чтобы добавить нужное слово, и некоторые стили шрифтов, чтобы надпись выглядела, как-будто выгравирована на фоне:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.switch label i:before { content: "выкл"; position: absolute; top: 48%; right: -70%; margin-top: -12px; color: #666; /* Fallback */ color: rgba(0,0,0,0.4); font-style: normal; font-weight: bold; font-family: Calibri; font-size: 24px; text-transform: uppercase; text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e; } |
Так что теперь у нас есть кнопка вкл/выкл, который выглядит очень стильно, правда? При активации кнопки меняется три значения: цвет фона, позиция переключателя, и слово (“ВКЛ” или “ВЫКЛ”):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.switch input:checked ~ label { /* Фон */ background: #9abb82; } .switch input:checked ~ label i { /* Позиция переключателя */ left: auto; right: -1%; } .switch input:checked ~ label i:before { /* ВКЛ/ВЫКЛ */ content: "вкл"; top:48%; right: 116%; color: #82a06a; text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659; } |
На этом все! При свежей голове и памяти, можно данный css чекбокс и доработать, изменить текст, цвет, но это уже по желанию. Надеюсь конечный результат Вам понравился!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
