Веб-дизайнеру
Веб-разработчику
Дополнительно
Просто красивая форма входа CSS3
Скачать
Демо
Красивая форма входа, простая и привлекательная, легкая и светлая. Одна из особенностей этой формы является отсутствие label или подписанных названий полей. Да, как я уже говорил раннее, необходимо ясно показать пользователю, какое поле для чего. И в данном случае мы используем текст внутри форм, для обозначения формы. И для браузеров, которые не поддерживают их, мы сделаем видимые метки! Ещё один пример шикарной формы в статье “Форма входа для сайта + эффект на JQuery!”.
HTML структура
Сама форма входа, построенная стандартным способом с помощью form:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form class="form-4"> <h1>Войти</h1> <p> <label for="login">Логин или email</label> <input type="text" name="login" placeholder="Ваш логин или email" required> </p> <p> <label for="password">Пароль</label> <input type="password" name='password' placeholder="Сложный пароль" required> </p> <p> <input type="submit" name="submit" value="ВОЙТИ"> </p> </form> |
Позвольте обратить Ваше внимание на новый атрибут required. Если он поддерживается браузером, то позволяет ему проверить, заполнено ли обязательное поле или нет.
CSS
Как всегда, начнем с формы и её названия, так как это довольно просто.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.form-4 { /* Size and position */ width: 300px; margin: 60px auto 30px; padding: 10px; position: relative; /* Font styles */ font-family: 'Raleway', 'Lato', Arial, sans-serif; color: white; text-shadow: 0 2px 1px rgba(0,0,0,0.3); } .form-4 h1 { font-size: 22px; padding-bottom: 20px; } |
Перейдем с стилизации полей формы, и сделаем её ещё красивее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.form-4 input[type=text], .form-4 input[type=password] { /* Size and position */ width: 100%; padding: 8px 4px 8px 10px; margin-bottom: 15px; /* Styles */ border: 1px solid #4e3043; /* Fallback */ border: 1px solid rgba(78,48,67, 0.8); background: rgba(0,0,0,0.15); border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 1px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; /* Font styles */ font-family: 'Raleway', 'Lato', Arial, sans-serif; color: #fff; font-size: 13px; } |
Давайте изменим стиль для “заполнителей” placeholder (где это возможно):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.form-4 input::-webkit-input-placeholder { color: rgba(37,21,26,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.15); } .form-4 input:-moz-placeholder { color: rgba(37,21,26,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.15); } .form-4 input:-ms-input-placeholder { color: rgba(37,21,26,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.15); } |
Далее добавим стили при наведении на элемент, а также при активации поля ввода:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.form-4 input[type=text]:hover, .form-4 input[type=password]:hover { border-color: #333; } .form-4 input[type=text]:focus, .form-4 input[type=password]:focus, .form-4 input[type=submit]:focus { box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 1px rgba(0,0,0,0.1), 0 0 0 3px rgba(255,255,255,0.15); outline: none; } /* Fallback */ .no-boxshadow .form-4 input[type=text]:focus, .no-boxshadow .form-4 input[type=password]:focus { outline: 1px solid white; } |
Теперь кнопка отправки формы, которая будет вписываться в стиль формы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.form-4 input[type=submit] { /* Size and position */ width: 100%; padding: 8px 5px; /* Styles */ background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7)); border-radius: 5px; border: 1px solid #4e3043; box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 2px 1px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.3s ease-out; /* Font styles */ color: white; text-shadow: 0 1px 0 rgba(0,0,0,0.3); font-size: 16px; font-weight: bold; font-family: 'Raleway', 'Lato', Arial, sans-serif; } .form-4 input[type=submit]:hover { box-shadow: inset 0 1px rgba(255,255,255,0.2), inset 0 20px 30px rgba(99,64,86,0.5); } /* Fallback */ .no-boxshadow .form-4 input[type=submit]:hover { background: #594642; } |
А теперь, давайте стилизуем резервный вариант, в случае если браузер пользователя не поддерживает placeholder. Это очень важно для пользователю, и этому нужно уделить время, для организации запасного варианта.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.form-4 label { display: none; padding: 0 0 5px 2px; cursor: pointer; } .form-4 label:hover ~ input { border-color: #333; } .no-placeholder .form-4 label { display: block; } |
На это все, и вот наша красивая форма входа на сайт готова!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
