HTML Форма входа CSS3 в темном стиле

[BossArturKA]

Всем привет пользователи Pawno-Info.Ru!
В этом уроке мы сделаем красивую темную форму для авторизации)
Получиться вот так:

Приступим:
На картинке вверху видна готовая форма входа CSS. Это одна из работ старых работ пана из Вергилии. К сожалению, похоже, что он убрал его из публичного доступа, и я не смогу показать вам настоящую концепцию. Во всяком случае, вы, вероятно, поняли смысл того, что мы будем делать. А именно, удивительный световой эффект на чистом CSS3! Форма выполнена в темном стиле, но другой пример красивой формы входа можно увидеть в статье “Форма входа для сайта + эффект на JQuery!”.

HTML

Как обычно, начнем с html, и вот наша форма.

<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>

Посмотрите, как мы вводим новую функцию: “Запомнить меня”. Это специфично для формы ввода пароля.

Основные стили для формы входа на сайт:

.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 текст/пароль при наведении и активации поля.

.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 поля, и мы должны стилизовать чекбокс “Запомнить меня” и кнопку отправки формы. Обе они стоят друг возле друга, на одной строке.

.form-3 p:nth-child(3),
.form-3 p:nth-child(4) {
    float: left;
    width: 50%;
}

Мы используем передовые селекторы CSS3, чтобы ориентироваться на них, но вы можете использовать класс, если хотите. Во всяком случае, давайте начнем с чекбокса и label:

.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;
}

И последнее, что мы сделаем, это кнопку отправки формы:

.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.

/* 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;
}

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

.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):

.no-pointerevents .form-3 p:nth-child(1):before {
    display: none;
}

Все готово! Надеюсь, Вы подчеркнули для себя что-то интересное и полезное из этого урока, и имеете готовую форму входа на CSS3.

Источник урока:

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!