Форма входа используя HTML5 структуру

В большей своей части эта форма авторизации подойдет для входа в админ панель сайта. Но это только мое мнение. И так приступим, как всегда начнем с разметки.

HTML

Разметка самая простая, ничем по сути своей не отличающаяся от других. Через тег form мы пишем нашу разметку добавляя заголовок h1, 2 input поля type="text для вашего логина и type="password" для ввода пароля, кнопку отправки запроса type="submit" и ссылку регистрации и напоминания пароля. Выглядит это следующим образом:

Код

<div class="container">
<section id="content">
  <form action="">
  <h1>Форма входа</h1>
  <div>
  <input type="text" placeholder="Введите свой логин" required="" id="username">
  </div>
  <div>
  <input type="password" placeholder="Введите пароль" required="" id="password">
  </div>
  <div>
  <input type="submit" value="Вход">
  <a href="#">Забыли пароль?</a>
  <a href="#">Регистрация</a>
  </div>
  </form>
</section>
</div>

Разметка готова, теперь приступим к стилизации.

CSS

Первое что нам нужно, так это сбросить стили браузеров для корректного отображения в них формы. Почему мы рассматриваем этот кусок кода отдельно? Потому что на многих сайта уже есть свои стили сброса и если у вас они тоже есть, то я думаю что этот код вам не нужен. Если нету, то вставляем:

Код

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

Теперь перейдем ко всем остальным стилям, что бы не расписывать каждый кусок кода я буду писать пояснения в комментариях. И так поехали.

Код

form:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.container { //Блок контейнер для обертки нашей формы и выравнивания ей по центру
  margin: 25px auto;
  font: 14px Arial;
  position: relative;
  width: 900px;
  }
#content { // Секция с формой, тут сделаем gradient с rgba цветами и зададим тени для блока и другие необходимые стили
  background: #f9f9f9;
  background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
  -webkit-box-shadow: 0 1px 0 #fff inset;
  -moz-box-shadow: 0 1px 0 #fff inset;
  -ms-box-shadow: 0 1px 0 #fff inset;
  -o-box-shadow: 0 1px 0 #fff inset;
  box-shadow: 0 1px 0 #fff inset;
  border: 1px solid #c4c6ca;
  margin: 0 auto;
  padding: 25px 0 0;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  width: 400px;
}
#content h1 {// Зададим стили для нашего заголовка
  color: #7E7E7E;
  font: bold 25px Helvetica, Arial, sans-serif;
  letter-spacing: -0.05em;
  line-height: 20px;
  margin: 10px 0 30px;
}
#content h1:before // Зададим размер линий по бокам для заголовка
#content h1:after {
  content: "";
  height: 1px;
  position: absolute;
  top: 10px;
  width: 27%;
}
#content h1:after {// Стили для линии справа
  background: rgb(126,126,126);
  background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  background: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  background: linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  right: 0;
}
#content h1:before {// Стили для линии слева
  background: rgb(126,126,126);
  background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  left: 0;
}
#content:after, // Создаем стили для эффекта листов на заднем плане
#content:before {
  background: #f9f9f9;
  background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
  border: 1px solid #c4c6ca;
  content: "";
  display: block;
  height: 100%;
  left: -1px;
  position: absolute;
  width: 100%;
}

#content:after {// Поворачиваем правый псевдоблок
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
  top: 0;
  z-index: -1;
}
#content:before {// Поворачиваем левый псевдоблок
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
  top: 0;
  z-index: -2;
}
#content form { margin: 0 20px; position: relative }
#content form input[type="text"],// Зададим стили для наших полей формы
#content form input[type="password"] {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: #eae7e7 url('/img/8bcLQqF.png') no-repeat;
  border: 1px solid #c8c8c8;
  color: #777;
  font: 13px Helvetica, Arial, sans-serif;
  margin: 0 0 10px;
  padding: 15px 10px 15px 40px;
  width: 80%;
}
#content form input[type="text"]:focus,// Зададим стили для наших полей формы при нажатии
#content form input[type="password"]:focus {
  -webkit-box-shadow: 0 0 2px #ed1c24 inset;
  -moz-box-shadow: 0 0 2px #ed1c24 inset;
  -ms-box-shadow: 0 0 2px #ed1c24 inset;
  -o-box-shadow: 0 0 2px #ed1c24 inset;
  box-shadow: 0 0 2px #ed1c24 inset;
  background-color: #fff;
  border: 1px solid #ed1c24;
  outline: none;
}
#username { background-position: 10px 10px !important }// Фоновая картинка для поля логин
#password { background-position: 10px -53px !important }// Фоновая картинка для поля пароль
#content form input[type="submit"] {// Зададим стили для нашей кнопки
  background: rgb(254,231,154);
  background: -moz-linear-gradient(top, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
  background: -webkit-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
  background: -o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
  background: -ms-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
  background: linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  -o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  border: 1px solid #D69E31;
  color: #85592e;
  cursor: pointer;
  float: left;
  font: bold 15px Helvetica, Arial, sans-serif;
  height: 35px;
  margin: 20px 0 35px 15px;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  width: 120px;
}
#content form input[type="submit"]:hover {// Зададим стили для наведения на кнопку
  background: rgb(254,193,81);
  background: -moz-linear-gradient(top, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
  background: -webkit-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
  background: -o-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
  background: -ms-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
  background: linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#content form div a {// Прочие ссылки
  color: #004a80;
  float: right;
  font-size: 12px;
  margin: 30px 15px 0 0;
  text-decoration: underline;
}

Все готово.. Спс за внимание

FalleN
5693
1
227

Алё бля

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

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

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

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

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

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

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

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

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

Мини-чат

Наш опрос

Хотели бы вы увидеть полный курс по HTML5 и CSS3

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

Форма входа используя HTML5 структуру

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

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

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