Хаки и Скрипты Next Generation CMS

Стильные,аннимированные чекбоксы на CSS3

irbees2008 irbees2008 Опубликовано - 26 - января Интерфейс
2636 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Искал себе на сайт красивые чекбоксы,нашел и делюсь с вами.
И так приступим
1.В файле main.tpl в head подключаем необходимые шрифты

Код:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Exo+2&subset=latin,cyrillic" rel="stylesheet" type="text/css">
2.В файл стилей шаблона добавляем стили для наших чекбоксов
Код:
/* добавляем шрифт-иконки чекбоксам */
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 {
overflow: hidden;
/* иконки скрыты с помощью 0 max-width и overflow hidden */
max-width: 0;
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(240, 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%);}

3.И теперь код самих чекбоксов
Код:
<input type="checkbox" name="one" id="one" />
<label for="one">Создать чекбокс</label>
4.Вот и все куда ставить их ваше дело,я добавил их в опросы ,и как видите работают.Будут вопросы спрашивайте.

Можешь почитать и вот эту статейку "Скрипт галереи от Google"

Опрос

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3408 дней
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 578
  • Онлайн всего: [27]
  • Гости: [24]
  • Поисковики: [3] Google, Яндекс, Яндекс
  • Были сегодня : [6] Google, Яндекс, Яндекс, redflame, Яндекс, irbees2008
  • SQL запросов: 32
  • Генерация страницы: 0.583сек
  • Потребление памяти: 4.954 Mb 
  •   яндекс.ћетрика