Анимированные чекбоксы с использованием шрифт-иконок
Стандартные элементы управления форм, не отличаются хоть каким-нибудь оформлением. Разработчики и веб-дизайнеры используют различные решения чтобы оригинально оформить эти элементы. С полями ввода форм, всё более-менее понятно, а вот при изменении базовых стилей чекбоксов или радиокнопок, у многих возникают затруднения.
Предлагаю на ваше рассмотрение ещё одно интересное решение оформления чекбоксов, исключительно средствами 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 и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 0