Форма авторизации и регистрации при помощи HTML5 и CSS3

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

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

В статье будет описание примера из Demo 1.

HTML-код

В HTML-коде, мы создадим две формы, при этом вторую скроем при помощи CSS. Вот код, я объясню некоторые интересные части позже.

<div id="container_demo" >
 <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
 <a class="hiddenanchor" id="tosubscribe"></a>
 <a class="hiddenanchor" id="tologin"></a>
 <div id="wrapper">
 <div id="login" class="animate form">
 <form  action="mysuperscript.php" autocomplete="on">
 <h1>Log in</h1>
 <p>
 <label for="username" class="uname" data-icon="u" > Your email or username </label>
 <input id="username" name="username" required="required" type="text" placeholder="myusername or <span id="cloak32cc34532c81a17a2e2353ebe902183c">Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.</span><script type='text/javascript'>
        document.getElementById('cloak32cc34532c81a17a2e2353ebe902183c').innerHTML = '';
        var prefix = '&#109;a' + 'i&#108;' + '&#116;o';
        var path = 'hr' + 'ef' + '=';
        var addy32cc34532c81a17a2e2353ebe902183c = 'mym&#97;&#105;l' + '&#64;';
        addy32cc34532c81a17a2e2353ebe902183c = addy32cc34532c81a17a2e2353ebe902183c + 'm&#97;&#105;l' + '&#46;' + 'c&#111;m';
        var addy_text32cc34532c81a17a2e2353ebe902183c = 'mym&#97;&#105;l' + '&#64;' + 'm&#97;&#105;l' + '&#46;' + 'c&#111;m';document.getElementById('cloak32cc34532c81a17a2e2353ebe902183c').innerHTML += '<a ' + path + '\'' + prefix + ':' + addy32cc34532c81a17a2e2353ebe902183c + '\'>'+addy_text32cc34532c81a17a2e2353ebe902183c+'<\/a>';
    </script>"/>
 </p>
 <p>
 <label for="password" class="youpasswd" data-icon="p"> Your password </label>
 <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />
 </p>
 <p class="keeplogin">
 <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
 <label for="loginkeeping">Keep me logged in</label>
 </p>
 <p class="login button">
 <input type="submit" value="Login" />
 </p>
 <p class="change_link">
 Not a member yet ?
 <a href="#tosubscribe" class="to_subscribe">Join us</a>
 </p>
 </form>
 </div>
 
 <div id="subscribe" class="animate form">
 <form  action="mysuperscript.php" autocomplete="on">
 <h1> Sign up </h1>
 <p>
 <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
 <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
 </p>
 <p>
 <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
 <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="<span id="cloak682eb13ba21a148aaea660f6b6d1932c">Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.</span><script type='text/javascript'>
        document.getElementById('cloak682eb13ba21a148aaea660f6b6d1932c').innerHTML = '';
        var prefix = '&#109;a' + 'i&#108;' + '&#116;o';
        var path = 'hr' + 'ef' + '=';
        var addy682eb13ba21a148aaea660f6b6d1932c = 'mys&#117;p&#101;rm&#97;&#105;l' + '&#64;';
        addy682eb13ba21a148aaea660f6b6d1932c = addy682eb13ba21a148aaea660f6b6d1932c + 'm&#97;&#105;l' + '&#46;' + 'c&#111;m';
        var addy_text682eb13ba21a148aaea660f6b6d1932c = 'mys&#117;p&#101;rm&#97;&#105;l' + '&#64;' + 'm&#97;&#105;l' + '&#46;' + 'c&#111;m';document.getElementById('cloak682eb13ba21a148aaea660f6b6d1932c').innerHTML += '<a ' + path + '\'' + prefix + ':' + addy682eb13ba21a148aaea660f6b6d1932c + '\'>'+addy_text682eb13ba21a148aaea660f6b6d1932c+'<\/a>';
    </script>"/>
 </p>
 <p>
 <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
 <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
 </p>
 <p>
 <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
 <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
 </p>
 <p class="signin button">
 <input type="submit" value="Sign up"/>
 </p>
 <p class="change_link">
 Already a member ?
 <a href="#tologin" class="to_subscribe"> Go and log in </a>
 </p>
 </form>
 </div>
 
 </div>
</div>

Мы использовали некоторые из возможностей HTML5. Поле с type=email позволяет браузеру проверить, ввел ли пользователь правильный адрес электронной почты. Мы также использовали атрибут require=required, браузеры, которые поддерживают этот атрибут, не позволят пользователю отправить форму пока это поле не будет заполнено, без использования JavaScript. Атрибут autocomplete=on позволяет заполнять значения, основываясь на ранее введенных пользователем данных.

Теперь два сложных момента. Вы могли заметить две <a href> ссылки в верхней части формы. Это маленькая хитрость, которая позволит вести себя нашей форме правильно, и не «прыгать» на длинных страницах, когда мы нажимаем на ссылку переключения и вызываем псевдо-класс :target.

Вторая маленькая хитрость связана с использованием шрифта с иконками. Мы будем использовать data-attribute для отображения иконок. Установив data-icon=”icon_character” с соответствующим символом  в HTML, нам теперь нужно только одно CSS правило для всех значков. Узнайте больше об этой технике здесь: 24 Ways: Displaying Icons with Fonts and Data- Attributes.

CSS

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

Стили для формы, используя CSS3

Во-первых, давайте зададим нашим формам некоторые общие стили.

#subscribe,
#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);
 box-shadow:
 0pt 2px 5px rgba(105, 108, 109,  0.7),
 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
 border-radius: 5px;
}
#login{
 z-index: 22;
}

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

Теперь зададим стили для текста:

 /**** общие стили для текста ****/
#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:
 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%);
}

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

Мы также создали исчезающую линию под заголовком с помощью псевдо-класса :after. Мы используем градиент с высотой 2px и изменяем непрозрачность фона до 0 на обоих концах.

Теперь давайте определим стили для полей формы, чтобы они приятнее выглядели.

 /**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  {
 color: rgb(190, 188, 188);
 font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
 color: rgb(190, 188, 188);
 font-style: italic;
}
input {
 outline: none;
}

Мы удалили контур (outline) для полей. Но имейте ввиду: контур позволяет пользователю понять какое поле активное на текущий момент. Поэтому, если вы убираете его, то нужно определить стили для псевдо-классов :active и :focus.

 /* all the input except submit and checkbox */
#wrapper input:not([type="checkbox"]){
 width: 92%;
 margin-top: 4px;
 padding: 10px 5px 10px 32px;
 border: 1px solid rgb(178, 178, 178);
 box-sizing : content-box;
 border-radius: 3px;
 box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
 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);
 box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}

Здесь мы использовали псевдо-класс :not, задали стили для всех полей, за исключением checkbox.

А теперь самое интересное: шрифт со значками. Поскольку мы не можем использовать псевдо-классы :before и :after в input-ах, мы сделаем небольшую хитрость: мы добавим значок в label, а затем поместить его в input. Я использую библиотеку fontomas, которая содержит множество хороших иконок. Вы можете сами сопоставить иконки с нужной буквой. Помните атрибут data-icon? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ - для электронной почты, ‘p’ - для пароля. После того как я выбрал буквы, я скачал шрифт и использовал fontsquirrel font generator, для конвертации в совместимый формат для @font-face.

 @font-face {
 font-family: 'FontomasCustomRegular';
 src: url('fonts/fontomas-webfont.eot');
 src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
 url('fonts/fontomas-webfont.woff') format('woff'),
 url('fonts/fontomas-webfont.ttf') format('truetype'),
 url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
 font-weight: normal;
 font-style: normal;
}
 
/** the magic icon trick ! **/
[data-icon]:after {
 content: attr(data-icon);
 font-family: 'FontomasCustomRegular';
 color: rgb(106, 159, 171);
 position: absolute;
 left: 10px;
 top: 35px;
 width: 30px;
}

Да, нам не нужно создавать класс для каждого значка. Мы использовали content: attr(data-icon), чтобы получить букву с атрибута data-icon, так что мы только должны объявить шрифт, выбрать хороший цвет и его позицию.

Теперь давайте стилизуем кнопку отправки для обоих форм.

 /*стили для submit buttons */
#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);
 border-radius: 3px;
 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);
 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);
 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;
}

Затем мы зададим стили для checkbox-a, здесь ничего особенного нет:

 /* styling the checkbox "keep me logged in"*/
.keeplogin{
 margin-top: -5px;
}
.keeplogin input,
.keeplogin label{
 display: inline-block;
 font-size: 12px;
 font-style: italic;
}
.keeplogin input#loginkeeping{
 margin-right: 5px;
}
.keeplogin label{
 width: 80%;
}

Зададим стили для нижней части формы, с помощью повторяющихся линейных градиентов создадим полосатый фон.

 p.change_link{
 position: absolute;
 color: rgb(127, 124, 124);
 left: 0px;
 height: 20px;
 width: 440px;
 padding: 17px 30px 20px 30px;
 font-size: 16px ;
 text-align: right;
 border-top: 1px solid rgb(219, 229, 232);
 border-radius: 0 0  5px 5px;
 background: rgb(225, 234, 235);
 background: repeating-linear-gradient(-45deg,
 rgb(247, 247, 247) ,
 rgb(247, 247, 247) 15px,
 rgb(225, 234, 235) 15px,
 rgb(225, 234, 235) 30px,
 rgb(247, 247, 247) 30px
 );
}
#wrapper p.change_link a {
 display: inline-block;
 font-weight: bold;
 background: rgb(247, 248, 241);
 padding: 2px 6px;
 color: rgb(29, 162, 193);
 margin-left: 10px;
 text-decoration: none;
 border-radius: 4px;
 border: 1px solid rgb(203, 213, 214);
 transition: all 0.4s  linear;
}
#wrapper p.change_link a:hover {
 color: rgb(57, 191, 215);
 background: rgb(247, 247, 247);
 border: 1px solid rgb(74, 179, 198);
}
#wrapper p.change_link a:active{
 position: relative;
 top: 1px;
}

Теперь, как вы можете видель, у нас есть две симпатичных формы, но нам нужно видеть одновременно только одну из них на экране. Поэтому сейчас самое время для создания анимации!

Создание анимации

Первое, что нужно сделать, чтобы скрыть вторую форму, установить непрозрачность (opacity) равную 0:

 #register{
 z-index: 21;
 opacity: 0;
}

Помните, что наша форма авторизации имела z-index: 22? Мы зададим второй форме z-index:21, поместим её "под" форму авторизации.

А теперь самая интересная часть: переключение формы с использованием псевдо класса :target. Мы будем использовать якоря, чтобы сделать переход. Нормальное поведение якоря - это прыжок на определенный элемент страницы. Но мы не хотим куда-либо "прыгать", мы только хотим "переключить" форму. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас ко второй форме, рискуя испытать эффект “прыжка”, мы зададим ссылкам параметр display: none. Это поможет избежать прыжков. Я нашел этот трюк тут: CSS3 create (на французском).

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

Итак, что происходит когда мы нажимаем на кнопку  Join us, мы переходим на #toregister. Затем мы создаем анимацию, с помощью селектора ~ находим наш элемент #register. Мы используем анимацию, которую называют fadeInLeft. Так как мы "скрываем" форму, используя нулевую прозрачность, мы будем использовать анимацию, которая блекнет, чтобы форма появилась. Мы также изменили z-index, чтобы форма появилась поверх другой формы.
То же самое происходит и для другой формы.

А вот код для анимации. Мы используем CSS3 animation framework от Dan Eden и адаптировали его для этого урока.

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

Форма, которая "исчезает" будет иметь другую анимацию, которая будет исчезать слева:

 #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);
 }
}

Теперь Вы можете использовать другие анимации из animate.css: просто настройте класс .animate, и замените название анимации.

Ну, вот и все. Надеюсь, вам понравился урок!

Обратите внимание, что в некоторых браузерах background-clip: text не поддерживается. В Internet Explorer 9 переходы и анимация не работают, так что не будет переключения формы. В Internet Explorer 8 и ниже псевдо-класс :target не поддерживается, поэтому он не будет работать вообще (вы увидите только форму авторизации).

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments