CSS чекбокс с привлекающим эффектом | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSCSS чекбокс с привлекающим эффектом
Дата: 06.05.2013 в 00:27 | Просмотров: 6013

CSS чекбокс с привлекающим эффектом

CSS чекбокс с привлекающим эффектом
Скачатьбесплатно с сервера
Демодемонстрация

CSS3 – это действительно интересное дело, благодаря которому можно творить то, что кажется невозможным. И сейчас мы рассмотрим пример создания красивой, даже можно сказать “крутой” кнопки, а именно это css чекбокс (checkbox). Как-то совсем недавно мы уже рассматривали возможные варианты стилизации чекбоксов и радио кнопок в статье “Красивые Radio Buttons (radio кнопка) и Checkbox CSS (чекбокс)”. Этот пример основан на работе от Петра Квятковского, но чекбокс будет несколько изменена под наши потребности и желания. Ну что же, давайте приступим к созданию CSS3 эффектов для нашей кнопки!

HTML структура

Разметка будет вполне проста. Класс для тега i требуется для того, чтобы применить шрифт FontAwesome.

На это все, перейдем к следующему шагу – стилизация чекбокса.

CSS стили

Мы не будем сейчас рассматривать все о шрифте FontAwesome, потому что я уверен, что эту тему Вы можете найти в другой статье, а также, вероятно, Вы уже делали подобное раньше. А именно, нужно просто убедиться в следующем:

  • Для шрифта @font-face указан правильный путь к файлам;
  • В одном из Ваших файлов CSS стилей подключен шрифт FontAwesome.

Итак, давайте начнем с основ: как скрывать чекбокс и размеры:

Теперь, давайте работать с label. Обратите внимание, что здесь мы включаем несколько шрифтов. Поскольку все они наследуются, они будут идти прямо к элементу i (значок). Так что ничего нового нет – градиент и некоторые тени box-shadow для красивого эффекта:

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

Хорошо, давайте поработаем на элементом: i . FontAwesome использует :before псевдо-элемент, для показа значка, поэтому мы не можем его использовать. Но, мы можем и будем использовать :after, потому что нам нужно что-то, чтобы сделать верхнюю часть нашей кнопки.
Как обычно, мы даем ей хороший градиент, некоторые тонкие тени и размытие 1px, чтобы сделать её более гладкой.

И как видим все просто: при активации кнопки, она светится зеленым, а при отключении – обычным серым:

Вот все и готово! Сложно? Думаю нет. Спасибо за то, что дочитали эту статью до конца. Отзывы и вопросы, пожалуйста, пишите в комментариях.


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


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