Анімовані чекбокси з використанням шрифт-іконок

65

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

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

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

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

HTML-Розмітка

Стандартна розкладка для створення прапорця, нічого нового. Використовуємо тег c атрибутом type=”checkbox” визначає вид елемента, в нашому випадку це буде прапорець (checkbox), і тег з атрибутом for=”one”, для зв’язку з ідентифікатором прапорця. Відповідно текст довільний і може бути будь-яким.

Створити чекбокс

Створити чекбокс

Стилі 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.35 s;
-moz-transition: all 0.35 s;
-o-transition: all 0.35 s;
transition: all 0.35 s;
}
/* приховуємо оригінальні прапорці */
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%);}

/* додаємо шрифт-іконки чекбоксам */
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.35 s;
-moz-transition: all 0.35 s;
-o-transition: all 0.35 s;
transition: all 0.35 s;
}
/* приховуємо оригінальні прапорці */
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"

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

або безпосередньо в HTML:


Краще(так радять специ наворочені) підключати шрифти безпосередньо в HTML, в розділі між тегами …. Для тексту демо використовував шрифт із сімейства «Exo 2»:


Не принципова опція, шрифт тексту може бути будь-яким, або відповідним використовуваного шрифту на вашому сайті.

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

Завантажити Вихідні Коди

З Повагою, Андрій .

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