Форма входа

Этот пример показывает простую форму входа с помощью HTML5 и CSS3 без JavaScript. В форме используются псевдоэлементы :after и :before, чтобы создать эффект нескольких листов. Эти элементы расположены с помощью свойств CSS3 transform.

Форма входа HTML5 и CSS3

Форма входа

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Форма входа HTML5 CSS3</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<div class="container">
 <section id="content">
  <form action="">
   <h1>Вход на сайт</h1>
    <div>
     <input placeholder="Имя" required="" id="username" type="text">
    </div>
    <div>
     <input placeholder="Пароль" required="" id="password" type="password">
    </div>
    <div>
      <input value="Войти" type="submit">
      <a href="#">Напомнить пароль?</a>
      <a href="#">Регистрация</a>
    </div>
   </form><!-- form -->
  <div class="button"><a href="#">Скачать</a></div><!-- button -->
 </section><!-- content -->
</div><!-- container -->
</body>
</html>

Стили CSS для формы входа.

54321
(0 голосов, в среднем: 0 из 5)