Главная » Сниппеты » Анимированные чекбоксы с использованием шрифт-иконок

Анимированные чекбоксы с использованием шрифт-иконок

Анимированные чекбоксы с использованием шрифт-иконок

Стандартные элементы управления форм, не отличаются хоть каким-нибудь оформлением. Разработчики и веб-дизайнеры используют различные решения чтобы оригинально оформить эти элементы. С полями ввода форм, всё более-менее понятно, а вот при изменении базовых стилей чекбоксов или радиокнопок, у многих возникают затруднения.
Предлагаю на ваше рассмотрение ещё одно интересное решение оформления чекбоксов, исключительно средствами CSS, с использованием шрифт-иконок и настраиваемым эффектом анимации.

Посмотрите живой пример, настроена на плавное появление флажков с задержкой 0.35s, все кликабельны, для демонстрации различных вариантов цветового оформления, использовано несколько чекбоксов, выстроенных в неупорядоченный список. Заодно перечислено всё что нужно для достижения желаемого результата:

В примере я использовал 6 флажков (checkbox) разного цвета. Базовая разметка и стили css для всех в общем одинаковы, отличается лишь раскраска, так что расклад, сделаем на примере самого первого из списка.

HTML Разметка

Стандартная раскладка для создания флажка, ничего нового. Используем тег <input> c атрибутом type="checkbox" определяющим вид элемента, в нашем случае это будет флажок (checkbox), и тег <label> с атрибутом for="one", для связи с идентификатором флажка. Соответственно текст произвольный и может быть любым.

<input type="checkbox" name="one" id="one" />
<label for="one">Создать чекбокс</label>

Стили CSS

Каждому селектору и некоторым свойствам прописал краткие комментарии, так что думаю, вся цепочка формирования стилей, будет понятна. Шрифт-иконки чекбоксам добавляем с помощью псевдоэлементов :before и :after. Для выбора цвета флажков, используется соответствующий идентификатор, в примере это: #one, #two, #three, и т.д... Остаётся только определиться с выбором.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* добавляем шрифт-иконки чекбоксам */
label {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  line-height: 16px;
  cursor: pointer;
}
label:before, label:after {
/* абсолютное позиционирование */
  position: absolute; top: 0; left: 0;
  font-size: 21px;
  font-family: FontAwesome;
}
label:before {
  content: '\f096'; /* флажек снят */
}
label:after {
/* иконки скрыты  с помощью 0 max-width и overflow hidden */
  max-width: 0;
  overflow: hidden;
  content: '\f046'; /*флажек включен*/
  opacity: 0.5;
/* переходы для анимации */
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
}
/* скрываем оригинальные флажки */
input[type="checkbox"] {
  display: none;
}
/* когда пользователь нажимает флажок запускается анимация*/
input[type="checkbox"]:checked + label:after {
   max-width: 25px; /*произвольное число больше ширины иконки*/
   opacity: 1; /*для эффекта плавного появления*/
}
/*добавляем красок в оформление чекбоксов*/
#one+label:before, #one+label:after {color: hsl(0, 45%, 40%);}
#two+label:before, #two+label:after {color: hsl(60, 45%, 40%);}
#three+label:before, #three+label:after {color: hsl(120, 45%, 40%);}
#four+label:before, #four+label:after {color: hsl(180, 45%, 40%);}
#five+label:before, #five+label:after {color: hsl(240, 45%, 40%);}
#six+label:before, #six+label:after {color: hsl(300, 45%, 40%);}

Красивые шрифт иконки не появятся из неоткуда сами по себе, пакет иконок необходимо подключить к работе. В данном примере я использовал иконки из состава пакета шрифта Font Awesome, вы же можете использовать любой другой набор.
Подключить шрифт Font Awesome к документу можно различными способами, самые простые — это через @import в CSS:

@import "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"

или напрямую в HTML:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Предпочтительнее(так советуют спецы навороченные) подключать шрифты непосредственно в HTML, в разделе между тегами <head>...</head>. Для текста в демо, использовал шрифт из семейства «Exo 2»:

<link href="http://fonts.googleapis.com/css?family=Exo+2&subset=latin,cyrillic" rel="stylesheet" type="text/css">

Не принципиальная опция, шрифт текста может быть любым, или соответствующим используемому шрифту на вашем сайте.

Для более детального изучения данного решения, можете скачать исходники, экспериментируйте с параметрами и используйте в своих проектах.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru