Главная » Файлы » Прочие скрипты » jQuery

Стильная анимированная форма входа, подобная Apple на CSS3 и jQuery для вашего сайта
[ Скачать с сервера (114.2 Kb) ] 27.10.14, 09:31:04



Очень прикольная форма входа. Смотрится стильно, но есть один минус - для вашей CMS вам придётся отредактировать форму так, как этого требует ваш движок, будь то uCoz, WP, Joomla и т.д.

Также в архиве есть папка с чистыми элементами без надписей, чтобы вы в редакторе изображений (Фотошопе, например) могли форму под себя настроить

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

В самый низ вашего css вставляйте:
Код
#formContainer {
  width:288px;
  height:321px;
  margin:0 auto;
  position:relative;
  z-index:1;
  -moz-perspective: 800px;
  -webkit-perspective: 800px;
  perspective: 800px;
}
#formContainer form {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  /* Enabling 3d space for the transforms */
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* When the forms are flipped, they will be hidden */
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Enabling a smooth animated transition */
  -moz-transition:0.8s;
  -webkit-transition:0.8s;
  transition:0.8s;
  /* Configure a keyframe animation for Firefox */
  -moz-animation: pulse 2s infinite;
  /* Configure it for Chrome and Safari */
  -webkit-animation: pulse 2s infinite;
}
/* Firefox Keyframe Animation */
  @-moz-keyframes pulse {
  0% {
  box-shadow:0 0 1px #008aff;
  }
  50% {
  box-shadow:0 0 8px #008aff;
  }
  100% {
  box-shadow:0 0 1px #008aff;
  }
}
/* Webkit keyframe animation */
  @-webkit-keyframes pulse {
  0% {
  box-shadow:0 0 1px #008aff;
  }
  50% {
  box-shadow:0 0 10px #008aff;
  }
  100% {
  box-shadow:0 0 1px #008aff;
  }
}
#login {
  background:url('/img/login_form_bg.jpg') no-repeat;
  z-index:100;
}
#recover {
  background:url('/img/recover_form_bg.jpg') no-repeat;
  z-index:1;
  opacity:0;
  /* Rotating the recover password form by default */
  -moz-transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg);
  transform:rotateY(180deg);
}
#formContainer.flipped #login {
  opacity:0;
  /**
  * Rotating the login form when the
  * flipped class is added to the container
  */
  -moz-transform:rotateY(-180deg);
  -webkit-transform:rotateY(-180deg);
  transform:rotateY(-180deg);
}
#formContainer.flipped #recover {
  opacity:1;
  /* Rotating the recover div into view */
  -moz-transform:rotateY(0deg);
  -webkit-transform:rotateY(0deg);
  transform:rotateY(0deg);
}
/*----------------------------
  Inputs, Buttons & Links
-----------------------------*/
  #login .flipLink, #recover .flipLink {
  /* The blue ribbon links */
  height: 65px;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-indent: -9999px;
  top: 0;
  width: 65px;
}
#recover .flipLink {
  right:auto;
  left:0;
}
#login:after {
  /* The "Click here" tooltip */
  width:98px;
  height:16px;
  content:'';
  position:absolute;
  right:-120px;
  top:22px;
}
input[type=text], input[type=password] {
  /* The text fields */
  font: 15px'Segoe UI', Arial, sans-serif;
  border: none;
  background:none;
  height: 36px;
  left: 26px;
  position: absolute;
  top: 176px;
  width: 234px;
  text-indent: 8px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  color:#eee;
  outline:none;
}
#loginPass {
  top: 215px;
}
#recoverEmail {
  top:215px;
}
input[type=submit] {
  /* Submit button */
  opacity:0.9;
  position:absolute;
  top:262px;
  left:25px;
  width: 239px;
  height:36px;
  cursor:pointer;
  border-radius:6px;
  box-shadow:0 1px 1px #888;
  border:none;
  color:#fff;
  font:14px/36px'Segoe UI Light', 'Segoe UI', Arial, sans-serif;
  /* CSS3 Gradients */
  background-image: linear-gradient(bottom, rgb(80, 102, 127) 50%, rgb(87, 109, 136) 50%, rgb(106, 129, 155) 100%);
  background-image: -o-linear-gradient(bottom, rgb(80, 102, 127) 50%, rgb(87, 109, 136) 50%, rgb(106, 129, 155) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(80, 102, 127) 50%, rgb(87, 109, 136) 50%, rgb(106, 129, 155) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(80, 102, 127) 50%, rgb(87, 109, 136) 50%, rgb(106, 129, 155) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(80, 102, 127) 50%, rgb(87, 109, 136) 50%, rgb(106, 129, 155) 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, rgb(80, 102, 127)), color-stop(0.5, rgb(87, 109, 136)), color-stop(1, rgb(106, 129, 155)));
}
input[type=submit]:hover {
  opacity:1;
}
input::-webkit-input-placeholder {
  color:#eee;
}


Следующий код туда, где должна быть форма входа:
Код
<div id="formContainer">
  <form id="login" method="post" action="/">
  <a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
  <input type="text" name="loginEmail" id="loginEmail" placeholder="Email" />
  <input type="password" name="loginPass" id="loginPass" placeholder="Password" />
  <input type="submit" name="submit" value="Login" />
  </form>
  <form id="recover" method="post" action="./">
  <a href="#" id="flipToLogin" class="flipLink">Forgot?</a>
  <input type="text" name="recoverEmail" id="recoverEmail" placeholder="Your Email" />
  <input type="submit" name="submit" value="Recover" />
  </form>
  </div>


Две картинки из архива залейте в папку img

За основу взята ЭТА статья

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Анимированная, на, apple, форма, JQuery, CSS3, подобная, входа, стильная, для
Просмотров: 525 | Загрузок: 140 | Рейтинг: 1.0/3
Всего комментариев: 0
Имя *:
Email: