Главная » Файлы » Дизайн » Графика для сайта

Кпоки прогресс 3D

Набор плоских кнопок 3D прогресс стилей, где сама кнопка служит индикатором прогресса. 3D стили используются для отображения индикации хода на одной стороне кнопки при вращении кнопки в перспективе.
Некоторые кнопки имеют встроенный индикатор выполнения и сегодня мы хотели бы изучить эту идею с некоторыми стилями кнопки творческих успехов. Использование перспективу позволит нам создать некоторые забавные 3D эффектов, кроме плоских «начинка» стилей.
Мы взяли обычную разметку кнопки
Код
<button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>Submit</button>

И превратили его в следующий вид:
Код
<button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>
  <span class="progress-wrap">
  <span class="content">Submit</span>
  <span class="progress">
  <span class="progress-inner"></span>
  </span>
  </span>
</button>

Если мы не ставим атрибут data-perspective то мы сделаем эту структуру:
Код
<button class="progress-button" data-style="fill" data-horizontal>
  <span class="content">Submit</span>
  <span class="progress">
  <span class="progress-inner"></span>
  </span>
</button>

Мы также указываем, если у нас есть стиль, который имеет горизонтальную или вертикальную заполнение индикатора выполнения. Эта информация будет использоваться в нашей CSS указание относительно стилей.
Следующие стили являются общими для всех кнопок (обратите внимание, что перспективные стили нужны только для кнопок с 3D-преобразования):
Код
*, *:after, *::before { box-sizing: border-box; }
   
@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: 'icomoon';
  src:url('../fonts/icomoon/icomoon.eot');
  src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
  url('../fonts/icomoon/icomoon.ttf') format('truetype'),
  url('../fonts/icomoon/icomoon.woff') format('woff'),
  url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
}
   
.progress-button {
  position: relative;
  display: inline-block;
  padding: 0 60px;
  outline: none;
  border: none;
  background: #1d9650;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1em;
  line-height: 4;
}
   
.progress-button[disabled],
.progress-button[disabled].state-loading {
  cursor: default;
}
   
.progress-button .content {
  position: relative;
  display: block;
}
   
.progress-button .content::before,
.progress-button .content::after {
  position: absolute;
  right: 20px;
  color: #0e7138;
  font-family: "icomoon";
  opacity: 0;
  transition: opacity 0.3s 0.3s;
}
   
.progress-button .content::before {
  content: "\e600"; /* Checkmark for success */
}
   
.progress-button .content::after {
  content: "\e601"; /* Cross for error */
}
   
.progress-button.state-success .content::before,
.progress-button.state-error .content::after {
  opacity: 1;
}
   
.notransition {
  transition: none !important;
}
   
.progress-button .progress {
  background: #148544;
}
   
.progress-button .progress-inner {
  position: absolute;
  left: 0;
  background: #0e7138;
}
   
.progress-button[data-horizontal] .progress-inner {
  top: 0;
  width: 0;
  height: 100%;
  transition: width 0.3s, opacity 0.3s;
}
   
.progress-button[data-vertical] .progress-inner {
  bottom: 0;
  width: 100%;
  height: 0;
  transition: height 0.3s, opacity 0.3s;
}
   
/* Necessary styles for buttons with 3D transforms */
   
.progress-button[data-perspective] {
  position: relative;
  display: inline-block;
  padding: 0;
  background: transparent;
  perspective: 900px;
}
   
.progress-button[data-perspective] .content {
  padding: 0 60px;
  background: #1d9650;
}
   
.progress-button[data-perspective] .progress-wrap {
  display: block;
  transition: transform 0.2s;
  transform-style: preserve-3d;
}
   
.progress-button[data-perspective] .content,
.progress-button[data-perspective] .progress {
  outline: 1px solid rgba(0,0,0,0); /* Smoothen jagged edges in FF */
}

Мы используем псевдо-элементы :: до и после :: за успех или об ошибки иконки, которые мы исчезают в один раз загрузка завершена. SPAN с прогрессом класса используется в качестве основного обертки для самой прогресс бар, который SPAN с классом прогресса-внутренней.
Обратите внимание, что для 3D примерах мы будем использовать кнопку как "оболочки", который будет служить для добавления в перспективе значение. SPAN контент будет содержать кнопку стили, такие как цвет фона и дополнения, и все будут обернуты в SPAN с классом прогресс-пленкой, которая будет элементом, который мы преобразуем.
Поделись ссылкой с друзьями:
Просмотров:
972
22.03.2014, 00:36
Категория: Графика для сайта | Добавил: туссин | Теги: Прогресс, Кпоки, buttons, 3d
Просмотров: 972 | Загрузок: 0 | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
comments powered by HyperComments

Disqus comments

comments powered by Disqus
Гипер-ссылка на источник
HTML
BB-Code
Ссылка

Сообщить о неработающей ссылке

E-mail отправителя *:
Тема *:
Адрес материала *:
Адрес битой ссылки *:
Проверка *:

1
Свернуть
Развернуть чат
Необходима авторизация
0