Кнопка вкл/выкл (чекбокс/checkbox) на CSS3 | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSКнопка вкл/выкл (чекбокс/checkbox) на CSS3
Дата: 07.05.2013 в 16:08 | Просмотров: 7722

Кнопка вкл/выкл (чекбокс/checkbox) на CSS3

кнопка вкл/выкл
Скачатьбесплатно с сервера
Демодемонстрация

Любому сайту может пригодится переключатель, кнопка вкл/выкл. Давайте сегодня создадим что-то крутое ;) . Это одна из прекрасных дизайнерских разработок Петра Квятковского. Ещё один из примеров его прекрасных работ, в статье “CSS чекбокс с привлекающим эффектом”. Выглядит солидно и современно, не так ли? На самом деле это обычный css чекбокс, который мы стилизуем и превратим в прекрасную юзабельную кнопочку. Готовую кнопку можно скачать по ссылку выше. Начнем!

HTML структура

Для этого переключателя, нам нужен дополнительный элемент. Давайте используем, что-то вроде i .

Вот, в принципе, и вся его структура, довольно простая. Но без стилей это просто чекбокс, поэтому стилизуем его.

CSS стили

Итак, мы скрываем сам флажок, и как всегда устанавливаем размеры кнопки для switch.

И сейчас мы сделаем следующее: label будет контейнером для переключателя. Тег i будет фактическим переключателем. Поэтому ярлык label будет в темно-сером фоне с тенями, не более того. Все остальное сделают псевдо-элементы.

Мы даем ему хороший градиент, и некоторые конфетные тени box-shadow.

Этот псевдо-элемент предназначен для создания мягкой обводки вокруг кнопки, так что, как обычно, мы будем использовать градиент и тени. Также добавим небольшое расширение для Chrome с использованием фильтра размытия, чтобы эффект был еще более мягким.

Теперь, у нас есть действительно красивая рамка для кнопки-переключатель. Давайте наконец займемся самим чекбоксом, правда?

Мы превращаем его в блочный элемент с помощью display, даем ему высоту своего родителя и немного больше, чем половина его ширины. Мы поместим его слева от контейнера, и дадим ему некоторые интересные стили (тени и градиенты), а именно:

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

Второй псевдо-элемент, это слово “ВКЛ” или “ВЫКЛ”, в зависимости от состояния кнопки. Мы используем свойство content, чтобы добавить нужное слово, и некоторые стили шрифтов, чтобы надпись выглядела, как-будто выгравирована на фоне:

Так что теперь у нас есть кнопка вкл/выкл, который выглядит очень стильно, правда? При активации кнопки меняется три значения: цвет фона, позиция переключателя, и слово (“ВКЛ” или “ВЫКЛ”):

На этом все! При свежей голове и памяти, можно данный css чекбокс и доработать, изменить текст, цвет, но это уже по желанию. Надеюсь конечный результат Вам понравился!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net/codrops
Перевел: Владислав Бондаренко


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