Форма входа CSS3 в темном стиле
↓ Также Вам будет интересно ↓
На картинке вверху видна готовая форма входа CSS. Это одна из работ старых работ пана из Вергилии. К сожалению, похоже, что он убрал его из публичного доступа, и я не смогу показать вам настоящую концепцию. Во всяком случае, вы, вероятно, поняли смысл того, что мы будем делать. А именно, удивительный световой эффект на чистом CSS3! Форма выполнена в темном стиле, но другой пример красивой формы входа можно увидеть в статье “Форма входа для сайта + эффект на JQuery!”.
HTML
Как обычно, начнем с html, и вот наша форма.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form class="form-3"> <p class="clearfix"> <label for="login">Логин</label> <input type="text" name="login" id="login" placeholder="Ваш логин"> </p> <p class="clearfix"> <label for="password">Пароль</label> <input type="password" name="password" id="password" placeholder="Сложный пароль"> </p> <p class="clearfix"> <input type="checkbox" name="remember" id="remember"> <label for="remember">Запомнить меня</label> </p> <p class="clearfix"> <input type="submit" name="submit" value="Войти"> </p> </form> |
Посмотрите, как мы вводим новую функцию: “Запомнить меня”. Это специфично для формы ввода пароля.
CSS
Основные стили для формы входа на сайт:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.form-3 { font-family: 'Ubuntu', 'Lato', sans-serif; font-weight: 400; /* Размер и позиция */ width: 300px; position: relative; margin: 60px auto 30px; padding: 10px; overflow: hidden; /* Стили */ background: #111; border-radius: 0.4em; border: 1px solid #191919; box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.08), 0 16px 10px -8px rgba(0, 0, 0, 0.6); } |
Тень под формой входа будет выглядеть особенно, потому что отрицательный радиус распространения. Мы можем реально сжать тень.
Давайте немного разберем структуру нашей форме. Для полей, мы используем два тега р
обертка, этикетки label
и стандартный input
. Нужно применить Clearfix для наших контейнеров.
Давайте добавим стили для label
текст/пароль при наведении и активации поля.
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
.form-3 label { /* Size and position */ width: 50%; float: left; padding-top: 9px; /* Styles */ color: #ddd; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 1px 0 #000; text-indent: 10px; font-weight: 700; cursor: pointer; } .form-3 input[type=text], .form-3 input[type=password] { /* Size and position */ width: 50%; float: left; padding: 8px 5px; margin-bottom: 10px; font-size: 12px; /* Styles */ background: linear-gradient(#1f2124, #27292c); border: 1px solid #000; box-shadow: 0 1px 0 rgba(255,255,255,0.1); border-radius: 3px; /* Font styles */ font-family: 'Ubuntu', 'Lato', sans-serif; color: #fff; } .form-3 input[type=text]:hover, .form-3 input[type=password]:hover, .form-3 label:hover ~ input[type=text], .form-3 label:hover ~ input[type=password] { background: #27292c; } .form-3 input[type=text]:focus, .form-3 input[type=password]:focus { box-shadow: inset 0 0 2px #000; background: #494d54; border-color: #51cbee; outline: none; /* Remove Chrome outline */ } |
Теперь у нас есть два красивых CSS3 поля, и мы должны стилизовать чекбокс “Запомнить меня” и кнопку отправки формы. Обе они стоят друг возле друга, на одной строке.
1 2 3 4 5 |
.form-3 p:nth-child(3), .form-3 p:nth-child(4) { float: left; width: 50%; } |
Мы используем передовые селекторы CSS3, чтобы ориентироваться на них, но вы можете использовать класс, если хотите. Во всяком случае, давайте начнем с чекбокса и label:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.form-3 label[for=remember] { width: auto; float: none; display: inline-block; text-transform: capitalize; font-size: 11px; font-weight: 400; letter-spacing: 0px; text-indent: 2px; } .form-3 input[type=checkbox] { margin-left: 10px; vertical-align: middle; } |
И последнее, что мы сделаем, это кнопку отправки формы:
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 34 35 36 37 |
.form-3 input[type=submit] { /* Width and position */ width: 100%; padding: 8px 5px; /* Styles */ border: 1px solid #0273dd; /* Fallback */ border: 1px solid rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 10px 10px rgba(255,255,255,0.1); border-radius: 3px; background: #38a6f0; cursor:pointer; /* Font styles */ font-family: 'Ubuntu', 'Lato', sans-serif; color: white; font-weight: 700; font-size: 15px; text-shadow: 0 -1px 0 rgba(0,0,0,0.8); } .form-3 input[type=submit]:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); } .form-3 input[type=submit]:active { background: #287db5; box-shadow: inset 0 0 3px rgba(0,0,0,0.6); border-color: #000; /* Fallback */ border-color: rgba(0,0,0,0.9); } .no-boxshadow .form-3 input[type=submit]:hover { background: #2a92d8; } |
Но где же наш обещанный эффект света? Ладно, ребята, давайте приступим к нему. Чтобы добиться этого, нам нужны три элемента:
- Градиент от верхней части формы;
- Небольшой флэш на предыдущей строке;
- Крупное отражение в правой части формы
Мы начнем с первых двух элементов для тега form
.
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 |
/* Gradient line */ .form-3:after { /* Size and position */ content: ""; height: 1px; width: 33%; position: absolute; left: 20%; top: 0; /* Styles */ background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); } /* Small flash */ .form-3:before { /* Size and position */ content: ""; width: 8px; height: 5px; position: absolute; left: 34%; top: -7px; /* Styles */ border-radius: 50%; box-shadow: 0 0 6px 4px #fff; } |
Наконец, наше отражение света. Но подождите, у нас не достаточно псевдо-элементов! Не волнуйтесь, мы будем использовать для этого наш первый пункт.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.form-3 p:nth-child(1):before{ /* Size and position */ content: ""; width: 250px; height: 100px; position: absolute; top: 0; left: 45px; /* Styles */ transform: rotate(75deg); background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0)); pointer-events: none; } |
Важно: необходимо отключить событие щелчка по нему pointer-events property
. Если вы этого не сделаете, вы не сможете нажать на формы ввода, так как там поверх них будет слой. Нам придется удалить отражения для браузеров, которые не поддерживают pointer-events (делаем мы это с помощью Modernizr):
1 2 3 |
.no-pointerevents .form-3 p:nth-child(1):before { display: none; } |
Все готово! Надеюсь, Вы подчеркнули для себя что-то интересное и полезное из этого урока, и имеете готовую форму входа на CSS3.
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко