Создание быстрой и элегантной формы входа

Сегодня мы постараемся воплотить в жизнь PSD исходник Элегантной формы входа автором которого является Орман Кларк, используя CSS3 и HTML5, а также CSS анимации Дэна Идена, чтоб все немного приукрасить.

HTML-разметка

Мы начнем с установки стилей в head нашего документа. У нас есть сборка стилей которые нам следует подключить, reset.css.Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей. для равенства стилей элементов во всех браузерах, Дэн Иден animate.css который мы будем использовать для некой анимации которая будет служить украшением, и наши собственные styles.css, над которыми мы проведем большую часть нашей работы.

Code

<!doctype html>

  <head>

  

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Login</title>

  

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/styles.css">

  </head>

Содержимое HTML включает в себя контейнер, форму и несколько полей.

Code

<body>

  
  <div id="container">
  <form>
  <label for="username">Логин:</label>
  <input type="text" id="username" name="username">
  <label for="password">Пароль:</label>
  <p><a href="#">Забыли пароль?</a></p>
  <input type="password" id="password" name="password">
  <div id="lower">
  <input type="checkbox"><label class="check" for="checkbox">запомнить пароль</label>
  <input type="submit" value="Вход">
  </div>
  </form>
  </div>
  

  </body>
  </html>

Позиционирование элементов

Теперь, когда мы написали наш HTML, мы можем перейти к CSS. Сначала мы определим основные элементы и позиционирование нашего блока в центре страницы.

Code

/* Basics */

html, body {
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  color: #444;
  -webkit-font-smoothing: antialiased;
  background: #f0f0f0;

}

#container {
  position: fixed;
  width: 340px;
  height: 280px;
  top: 50%;
  left: 50%;
  margin-top: -140px;
  margin-left: -170px;
}

Теперь мы добавим некоторые структурные стиль формы входа и других элементов:

Code

form {
  margin: 0 auto;
  margin-top: 20px;
}

label {
  color: #555;
  display: inline-block;
  margin-left: 18px;
  padding-top: 10px;
  font-size: 14px;
}

p a {
  font-size: 11px;
  color: #aaa;
  float: right;
  margin-top: -13px;
  margin-right: 20px;
}

p a:hover {
  color: #555;
}

input {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  outline: none;
}

input[type=text],
input[type=password] {
  color: #777;
  padding-left: 10px;
  margin: 10px;
  margin-top: 12px;
  margin-left: 18px;
  width: 290px;
  height: 35px;
}

#lower {
  background: #ecf2f5;
  width: 100%;
  height: 69px;
  margin-top: 20px;
}

input[type=checkbox] {
  margin-left: 20px;
  margin-top: 30px;
}

.check {
  margin-left: 3px;
}

input[type=submit] {
  float: right;
  margin-right: 20px;
  margin-top: 20px;
  width: 80px;
  height: 30px;
}

Стилизация элементов

Элементы расположены идеально. Теперь пришло время чтобы они ещё и выглядели красиво! Во-первых, мы добавим стиль контейнера, сделав ему слегка скругленные углы и падающую тень для эффекта трехмерного расположения элемента.

Code

В итоге мы получаем эффект падающей тени. Для кнопки отправки мы добавим градиент, с точным указанием цвета для удовлетворения IE9 и блоее раней версии браузеров. Обратите внимание, мы указываем индивидуальные CSS атрибуты для селекторов.

Code

form {
  margin: 0 auto;
  margin-top: 20px;
}

label {
  color: #555;
  display: inline-block;
  margin-left: 18px;
  padding-top: 10px;
  font-size: 14px;
}

p a {
  font-size: 11px;
  color: #aaa;
  float: right;
  margin-top: -13px;
  margin-right: 20px;
}

p a:hover {
  color: #555;
}

input {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  outline: none;
}

input[type=text],
input[type=password] {
  color: #777;
  padding-left: 10px;
  margin: 10px;
  margin-top: 12px;
  margin-left: 18px;
  width: 290px;
  height: 35px;
  border: 1px solid #c7d0d2;
  border-radius: 2px;
  box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
}

#lower {
  background: #ecf2f5;
  width: 100%;
  height: 69px;
  margin-top: 20px;
  box-shadow: inset 0 1px 1px #fff;
  border-top: 1px solid #ccc;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

input[type=checkbox] {
  margin-left: 20px;
  margin-top: 30px;
}

.check {
  margin-left: 3px;
  font-size: 11px;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}

input[type=submit] {
  float: right;
  margin-right: 20px;
  margin-top: 20px;
  width: 80px;
  height: 30px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: #acd6ef; /*IE fallback*/
  background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
  background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
  background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
  border-radius: 30px;
  border: 1px solid #66add6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
  cursor: pointer;
}

Далее, можно помочь пользователю, мы могли бы сделать некоторые эффекты когда курсор наведен на поле и когда поле активное:

Code

form {
  margin: 0 auto;
  margin-top: 20px;
}

label {
  color: #555;
  display: inline-block;
  margin-left: 18px;
  padding-top: 10px;
  font-size: 14px;
}

p a {
  font-size: 11px;
  color: #aaa;
  float: right;
  margin-top: -13px;
  margin-right: 20px;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  transition: all .4s ease;
}

p a:hover {
  color: #555;
}

input {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  outline: none;
}

input[type=text],
input[type=password] {
  color: #777;
  padding-left: 10px;
  margin: 10px;
  margin-top: 12px;
  margin-left: 18px;
  width: 290px;
  height: 35px;
  border: 1px solid #c7d0d2;
  border-radius: 2px;
  box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  transition: all .4s ease;
}

input[type=text]:hover,
input[type=password]:hover {
  border: 1px solid #b6bfc0;
  box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}

input[type=text]:focus,
input[type=password]:focus {
  border: 1px solid #a8c9e4;
  box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}

#lower {
  background: #ecf2f5;
  width: 100%;
  height: 69px;
  margin-top: 20px;
  box-shadow: inset 0 1px 1px #fff;
  border-top: 1px solid #ccc;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

input[type=checkbox] {
  margin-left: 20px;
  margin-top: 30px;
}

.check {
  margin-left: 3px;
  font-size: 11px;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}

input[type=submit] {
  float: right;
  margin-right: 20px;
  margin-top: 20px;
  width: 80px;
  height: 30px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: #acd6ef; /*IE fallback*/
  background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
  background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
  background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
  border-radius: 30px;
  border: 1px solid #66add6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
  cursor: pointer;
}

input[type=submit]:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
  background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
  background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}

input[type=submit]:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
  background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
  background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}

Последние штрихи

Наша форма входа выглядит довольно хорошо. Теперь можно поставить коня на лодку и заставить грести веслами, ну да ладно не будем мучать животных а добавим эффект появления для формы входа. Добавим не большую CSS анимацию, чтобы выглядело все ну уж прям так офигенно. Я уже ссылал вас ранее в этом уроке на animate.css Дэна Идена, вон этим и воспользуемся. Будем использовать анимацию типа bounceIn, с соответствующими префиксами браузеров.

Сначала, анимация для блока формы входа:

Code

#container {
  position: fixed;
  width: 340px;
  height: 280px;
  top: 50%;
  left: 50%;
  margin-top: -140px;
  margin-left: -170px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #ccc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  -webkit-animation-name: bounceIn;
  -webkit-animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: bounceIn;
  -moz-animation-fill-mode: both;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: linear;
  animation-name: bounceIn;
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

После, создаем плавный переход для эллементов формы:

Code

p a {
  font-size: 11px;
  color: #aaa;
  float: right;
  margin-top: -13px;
  margin-right: 20px;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  transition: all .4s ease;
}

input[type=text],
input[type=password] {
  color: #777;
  padding-left: 10px;
  margin: 10px;
  margin-top: 12px;
  margin-left: 18px;
  width: 290px;
  height: 35px;
  border: 1px solid #c7d0d2;
  border-radius: 2px;
  box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  transition: all .4s ease;
}

Надеюсь вам очень понравилось. Форма выглядит довольно привлекательно, функцианально и очень удобная. Спасибо за внимание!

FalleN
2552
1
231

Алё бля

Snap.svg - JavaScript библиотека для создания и манипулирования SVG

Все это конечно здорово, но данный скрипт к сожалению загоняет сайт под ошибку 403 из-за get запросов и частого обновления. А так конечно здорово.
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут

Автообновление любой части сайта - Очень полезный скрипт!!!

andrey7659, Большое вам спасибо!

Hover эффекты для изображений

Спасибо огромное уважаемые разработчики сайта get-element, ваш вариант №4 эффект 1 очень хорошо встал на моем кино сайте, и еще хочу вам сказать: что лучшего сайта я еще не видел))) ВАШ сайт Лучший!
С Уважением, Андрей...

Весь css-код скопировать в стили сайта и в нужное место вставить код меню. Все просто.

Адаптивное меню для экранов Retina

Категории раздела

Мини-чат

Наш опрос

Какие у вас будут пожелания

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

Создание быстрой и элегантной формы входа

Ссылки на статью:

Похожие статьи:

Добавить комментарий: