Как сделать CSS3 Login Form (форма входа на сайт)
В сегодняшнем уроке рассмотрим КАК СДЕЛАТЬ CSS3 LOGIN FORM (ФОРМА ВХОДА НА САЙТ)
Форма построена на чистом CSS и будет полезна вам - если вы захотите использовать эти приемы у себя на сайте. Тем более что форма выглядит неплохо и будет привлекать к себе внимание .
HTML
Начнем с HTML структуры. Начнем с создания скелета пустой формы, которая включает описание, кнопку входа, ссылку и основную схему структуры CSS3.
<form method="post" action="index.html" class="login"> <p> <label for="login">Email:</label> <input type="text" name="login" id="login" value="name(собака)example.com"> </p> <p> <label for="password">Пароль:</label> <input type="password" name="password" id="password" value="4815162342"> </p> <p class="login-submit"> <button type="submit" class="login-button">Вход</button> </p> <p class="forgot-password"><a href="/index.html">Забыли пароль?</a></p> </form>
CSS
После HTML структуры, приступим к таблице стилей. Скопируйте и вставьте код CSS, который ниже - он включает в себя окошки, основные цвета фона и шрифт.
body, .login-submit, .login-submit:before, .login-submit:after { background: #363636; } body { font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #404040; } a { color: #de7037; text-decoration: none; } a:hover { text-decoration: underline; color: #F7F7F7; }
Дополняем поля выравниванием, центрированием, задаем расстояние между полями, добавляем шрифт и тени.
.login { position: relative; margin: 80px auto; width: 430px; padding-right: 32px; font-weight: 300; color: #a8a7a8; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8); background-color: #363636; padding: 20px; padding-top: 30px; } .login p { margin: 0 0 10px; }
Форма входа
Хочется более причудливую форму входа, поэтому скопируйте код и вставьте в свой лист стилей. Это определит цвет фона, тени, радиус границы, высоту / ширину и лучшее позиционирование элементов.
input, button, label { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 15px;font-weight: 300; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type=text], input[type=password] { padding: 0 10px; width: 300px; height: 40px; color: #bbb; text-shadow: 1px 1px 1px black; background: rgba(0, 0, 0, 0.16); border: 0; border-radius: 5px; -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06); } input[type=text]:focus, input[type=password]:focus { color: white; background: rgba(0, 0, 0, 0.1); outline: 0; }
Расстояние
Вам нужно добавить в некоторые дополнительные интервалы и отступы к полям. Скопируйте и вставьте этот код, чтобы настроить элементы формы.
label { float: left; width: 100px; line-height: 40px; padding-right: 10px; font-weight: 100; text-align: right; letter-spacing: 1px; color: #fff; } .forgot-password { padding-left: 100px; font-size: 13px; font-weight: 100; letter-spacing: 1px; }
Кнопка Входа
Теперь, чтобы добавить кнопку входа (эта кнопка будет круглой и появится в центре поля для входа). Синтаксис в CSS иногда может быть немного запутанным на первый взгляд. Взгляните на приведенный ниже код и попробуйте разобрать его. в основном он состоит из простых элементов.
.login-submit { position: absolute; top: 42px; right: 4px; width: 48px; height: 48px; padding: 8px; border-radius: 32px; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.35); box-shadow: 0 0 4px rgba(0, 0, 0, 0.35); } .login-submit:before, .login-submit:after { content: ''; z-index: 1; position: absolute; } .login-submit:before { top: 28px; left: -4px; width: 4px; height: 10px; -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px rgba(255, 255, 255, 0.06); } .login-submit:after { top: -4px; bottom: -4px; right: -4px; width: 36px; } .login-button { position: relative; z-index: 2; width: 48px; height: 48px; padding: 0 0 48px; text-indent: 120%; white-space: nowrap; overflow: hidden; background: none; border: 0; border-radius: 24px; cursor: pointer; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1); } .login-button:before { content: ''; position: absolute; top: 5px; bottom: 5px; left: 5px; right: 5px; background: #de7037; border-radius: 24px; background-image: -webkit-linear-gradient(top, #de7037, #E2E214); background-image: -moz-linear-gradient(top, #de7037, #E2E214); background-image: -o-linear-gradient(top, #de7037, #E2E214); background-image: linear-gradient(to bottom, #de7037, #E2E214); -webkit-box-shadow: inset 0 0 0 1px #de7037, 0 0 0 5px rgba(0, 0, 0, 0.16); box-shadow: inset 0 0 0 1px #de7037, 0 0 0 5px rgba(0, 0, 0, 0.16); } .login-button:active:before { background: #0591ba; background-image: -webkit-linear-gradient(top, #0591ba, #de7037); background-image: -moz-linear-gradient(top, #0591ba, #de7037); background-image: -o-linear-gradient(top, #0591ba, #de7037); background-image: linear-gradient(to bottom, #0591ba, #de7037); } .login-button:after { content: ''; position: absolute; top: 15px; left: 12px; width: 25px; height: 19px; background: url("../../images/NEWS/web/web_design/31.07.2014/arrow.png") 0 0 no-repeat; }
Настройки для IE
Наконец мы добавим в CSS стили для Internet Explorer - так что бы не было никаких проблем с версткой (да, некоторые люди все еще используют IE и это печально).
<style> ::-moz-focus-inner { border: 0; padding: 0; } .lt-ie9 input[type=text], .lt-ie9 input[type=password] { line-height: 40px; background: #282828; } .lt-ie9 .login-submit { position: absolute; top: 12px; right: -28px; padding: 4px; } .lt-ie9 .login-submit:before, .lt-ie9 .login-submit:after { display: none; } .lt-ie9 .login-button { line-height: 48px; } .lt-ie9 .about { background: #313131; } </style>
Все готово. Вот картинка и пример работающей формы.