Лого SiteHere.ru

Форма регистрации и входа на CSS3+HTML5

Форма регистрации и входа на CSS3+HTML5

В этом уроке мы создадим две формы на HTML5, которые будут переключаться между собой, не занимая много места. Изначально видна форма входа на сайт,а внизу данной формы можно переключиться на форму регистрации, при этом одна форма сменит другую с красивым эффектом.

Пример разных видов переключения форм можно увидеть здесь:

Посмотреть примерСкачать

Формы будут работать только в браузерах, которые поддерживают псевдоэлемент :target, поэтому если решите применять данную форму у себя на сайте, необходимо сделать так, чтобы был вариант при котором форма будет работать и в других браузерах.



HTML часть

Мы помещаем две формы, а одну скрываем с помощью CSS:

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
54
55
56
57
58
59
<div id="container_demo" >
    <a class="hiddenanchor" id="toregister"></a>
    <a class="hiddenanchor" id="tologin"></a>
    <div id="wrapper">
        <div id="login" class="animate form">
            <form  action="mysuperscript.php" autocomplete="on"> 
                <h1>Вход</h1> 
                <p> 
                    <label for="username" class="uname" data-icon="u" > Ваш e-mail или логин</label>
                    <input id="username" name="username" required="required" type="text" placeholder="sitehere или sitehere.ru@my.com"/>
                </p>
                <p> 
                    <label for="password" class="youpasswd" data-icon="p"> Ваш пароль </label>
                    <input id="password" name="password" required="required" type="password" placeholder="например 123456" /> 
                </p>
                <p class="keeplogin"> 
                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
                    <label for="loginkeeping">Запомнить меня</label>
                </p>
                <p class="login button"> 
                    <input type="submit" value="Войти" /> 
                </p>
                <p class="change_link">
                    Не зарегистрированы еще ?
                    <a href="#toregister" class="to_register">Присоединяйтесь</a>
                </p>
            </form>
        </div>
 
        <div id="register" class="animate form">
            <form  action="mysuperscript.php" autocomplete="on"> 
                <h1> Регистрация </h1> 
                <p> 
                    <label for="usernamesignup" class="uname" data-icon="u">Ваш логин</label>
                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="myname1" />
                </p>
                <p> 
                    <label for="emailsignup" class="youmail" data-icon="e" > Ваш e-mail</label>
                    <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="sitehere.ru@my.com"/> 
                </p>
                <p> 
                    <label for="passwordsignup" class="youpasswd" data-icon="p">Ваш пароль </label>
                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="123456"/>
                </p>
                <p> 
                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Подтвердите ваш пароль </label>
                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="123456"/>
                </p>
                    <p class="signin button"> 
                    <input type="submit" value="Регистрация"/> 
                </p>
                <p class="change_link">  
                    Уже зарегистрированы ?
                    <a href="#tologin" class="to_register"> Войдите на сайт </a>
                </p>
            </form>
        </div>						
    </div>
</div>

Мы используем некоторые элементы HTML5, такие как <input type=»password»>, а также <input placeholder=»sitehere или sitehere.ru@my.com»/> для того чтобы на писать внутри input-а некоторы текст для примера. Еще мы использовали атрибут required для обязательного заполнения поля. И мы нигде не используем Javascript.



CSS часть

Здесь будут использоваться свойства, которые могут не работать во всех браузерах.

Итак, начнем. Зададим основные стили для наших форм:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#register, 
#login {
    position: absolute;
    top: 0px;
    width: 88%;	
    padding: 18px 6% 60px 6%;
    margin: 0 0 35px 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189,0.8);
    -webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),	0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),	0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),	0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    -webkit-box-shadow: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#register {	
    z-index: 21;
    opacity: 0;
}
#login {
    z-index: 22;
}

Добавим стиль для заголовка:

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
54
55
56
57
58
59
60
61
62
63
64
65
#wrapper h1 {
    font-size: 48px;
    color: rgb(6, 106, 117);
    padding: 2px 0 10px 0;
    font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30px;
}
/** Только webkit браузеры поодерживают background-clip:text; */
#wrapper h1 {
    background: 
        -webkit-repeating-linear-gradient(-45deg, 
	    rgb(18, 83, 93) , 
	    rgb(18, 83, 93) 20px, 
	    rgb(64, 111, 118) 20px, 
            rgb(64, 111, 118) 40px, 
            rgb(18, 83, 93) 40px);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
#wrapper h1:after {
    content: ' ';
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 10px;
    background: 
        -moz-linear-gradient(left, rgba(147,184,189,0) 0%, 
                                   rgba(147,184,189,0.8) 20%, 
                                   rgba(147,184,189,1) 53%, 
                                   rgba(147,184,189,0.8) 79%, 
                                   rgba(147,184,189,0) 100%); 
    background: 
        -webkit-gradient(linear, left top, right top, 
                         color-stop(0%,rgba(147,184,189,0)), 
                         color-stop(20%,rgba(147,184,189,0.8)), 
                         color-stop(53%,rgba(147,184,189,1)), 
                         color-stop(79%,rgba(147,184,189,0.8)), 
                         color-stop(100%,rgba(147,184,189,0))); 
    background: 
        -webkit-linear-gradient(left, rgba(147,184,189,0) 0%,
                                      rgba(147,184,189,0.8) 20%,
                                      rgba(147,184,189,1) 53%,
                                      rgba(147,184,189,0.8) 79%,
                                      rgba(147,184,189,0) 100%); 
    background: 
        -o-linear-gradient(left, rgba(147,184,189,0) 0%,
                                 rgba(147,184,189,0.8) 20%,
                                 rgba(147,184,189,1) 53%,
                                 rgba(147,184,189,0.8) 79%,
                                 rgba(147,184,189,0) 100%); 
    background: 
        -ms-linear-gradient(left, rgba(147,184,189,0) 0%,
                                  rgba(147,184,189,0.8) 20%,
                                  rgba(147,184,189,1) 53%,
                                  rgba(147,184,189,0.8) 79%,
                                  rgba(147,184,189,0) 100%); 
    background: 
        linear-gradient(left, rgba(147,184,189,0) 0%,
                              rgba(147,184,189,0.8) 20%,
                              rgba(147,184,189,1) 53%,
                              rgba(147,184,189,0.8) 79%,
                              rgba(147,184,189,0) 100%); 
}

Обратите внимание, что свойство background-clip: text поддерживают webkit браузеры.

Сейчас пропишем стили для input-ов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
::-webkit-input-placeholder  { 
    color: rgb(190, 188, 188); 
    font-style: italic;
}
 
input:-moz-placeholder,
textarea:-moz-placeholde r{ 
    color: rgb(190, 188, 188);
    font-style: italic;
} 
 
input {
    outline: none;
}

Мы выставили outline: none;, а значит в некоторых браузерах не будут видны активные input-ы. Поэтому не забудьте потом задать свойства для псевдоэлементов :focus и :active:

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
#wrapper input:not([type="checkbox"]) {
    width: 92%;
    margin-top: 4px;
    padding: 10px 5px 10px 32px;	
    border: 1px solid rgb(178, 178, 178);
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing : content-box;
    box-sizing : content-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus {
    border: 1px solid rgba(91, 90, 90, 0.7);
    background: rgba(238, 236, 240, 0.2);	
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}

Сейчас добавим стили для кнопки входа и регистрации:

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
#wrapper p.button input{
    width: 30%;
    cursor: pointer;	
    background: rgb(61, 157, 179);
    padding: 8px 5px;
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    color: #fff;
    font-size: 24px;	
    border: 1px solid rgb(28, 108, 122);	
    margin-bottom: 10px;	
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;	
    -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	                0px 0px 0px 3px rgb(254, 254, 254),
	                0px 5px 3px 3px rgb(210, 210, 210);
    -moz-box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	            0px 0px 0px 3px rgb(254, 254, 254),
	            0px 5px 3px 3px rgb(210, 210, 210);
    box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
               0px 0px 0px 3px rgb(254, 254, 254),
               0px 5px 3px 3px rgb(210, 210, 210);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#wrapper p.button input:hover{
    background: rgb(74, 179, 198);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
    background: rgb(40, 137, 154);
    position: relative;
    top: 1px;
    border: 1px solid rgb(12, 76, 87);	
    -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
    text-align: right;
    margin: 5px 0;
}

Мы сделали внутреннюю и внешннюю тень, а также границу.

А сейчас рассмотрим анимацию при переключении. Изначально необходимо спрятать вторую форму:

1
2
3
4
#register{ 
    z-index: 21;
    opacity: 0;
}

Для первой формы z-index: 22, то есть вторая форма будет находиться под первой.

Для переключения формы мы будет использовать псевдоэлемент :target :

1
2
3
4
5
6
#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
    z-index: 22;
    animation-name: fadeInLeft;
    animation-delay: .1s;
}

Для создания анимации при переключении будем использовать CSS фреймфорк:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.animate{
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
 
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

Форма которая «исчезает» имеет другую анимацию:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register{
    animation-name: fadeOutLeftBig;
}
 
@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
 
    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}


Вывод

Вот мы и создали необходимую форму. В демо примерах вы можете увидеть несколько видов переходов при переключении с одной формы на другую. Конечно использовать данную форму можно только при условии что у вас может подгружаться другая форма для других браузеров.


Успехов!

Источник: tympanus.net

6 комментариев к записи
  • Сергей

    Можно поподробнее, как подключить данную форму к phpmyadmin базе данны\таблице?
    Все запросы уже есть, но их требуется переделать. Прошу отписаться на почту

     
  • Алексей

    Юрий, доброе время суток.

    Понравилась форма, раньше делал другие формы, но эта понравилась, проверил во всех браузерах — работает. У меня к вам есть 2 просьбы, надеюсь поможете.

    1. Как подключить данную форму к phpmyadmin.

    2. Понравился эффект наведения на ссылки у вас на сайте, при наведении она плавно затемняется, выглядит интересно, хотелось реализовать и у себя на будущем сайте.

    С уважением, Алексей

     
    • Юрий Немец

      Здравствуйте, Алексей!

      Чтобы подключить данную форму к phpmyadmin, Вам необходимо разобраться с взаимодействием PHP+MySQL.

       
  • Олег

    Здравствуйте!

    Можно поподробнее, как подключить данную форму к phpmyadmin базе данны\таблице?
    Все запросы уже есть, но их требуется переделать. Прошу отписаться на почту.

    С уважением к Вам!

     

     
  • Интир Али

    Спасибо! У меня работола после этотго покажите чтобы подключить аккаунт на сайта, Удачи вам)

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *