Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target . Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1 .
HTML
Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required ; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.
Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).
Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute , чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes .
CSS
Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!Стилизуем формы, используя 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 и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.
Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.
Теперь давайте позаботимся о полях ввода и придадим им приятный вид.
/**** 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; }
Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.
/* все поля исключают submit и checkbox */ #wrapper input:not(){ 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():active, #wrapper input:not():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, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.
Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon ? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @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; } /** магический трюк! **/ :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. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.
Теперь назначим правила для кнопки отправки формы.
/*стилизуем обе кнопки*/ #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; }
Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.
Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:
/* стилизуем чекбокс "запомнить меня"*/ .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? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.
Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none . Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).
#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; }
Вот, что происходит: когда мы кликаем на кнопку Присоединиться
, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft
. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали 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); } }
Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.
Вот и все, друзья. Надеюсь вам понравился этот туториал!
Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.
P.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!
Теги:
- веб-дизайн
- css3
- html5
Привет, друзья! Сегодня мы хотим предложить вам очередное CSS-руководство! После всевозможных переключателей и выпадающих списков, позвольте нам перейти к разработке форм. В целом, мы будем создавать формы авторизации. Сегодня практически каждый веб-сервис, приложение, игра и так далее предлагает (а иногда даже требует) нам подписку, что означает необходимость иметь какую-нибудь форму, посредством которой пользователь регистрируется или авторизуется.
Учитывая это, мы попробовали разработать несколько разных форм авторизации, некоторые из которых были созданы под вдохновением от дизайн-идей с просторов интернета. Нашей целью было придать каждой из них какую-то особенность.
Кое-что перед тем, как начать:
* В отрывках CSS-кода вы не увидите браузерных префиксов, но все они есть в исходниках.
* Цель данного руководства заключается в том, чтобы показать вам потенциал CSS, в особенности CSS3, и поэтому рендер в IE8 и ниже может отличаться. Если вы планируете организовывать поддержку этих браузеров, постарайтесь предоставить запасные варианты.
* Мы не используем на теге формы атрибуты вроде action или method, так как наша цель – сосредоточиться на дизайне.
* Здесь мы используем box-model, где [ширина]=[ширина элемента]+[отступы]+[границы]. Эту модель можно активировать следующим отрывком кода:
*,
*:after,
*:before {
box-sizing: border-box;
}
Пару слов о дружественности с пользователем
Вам нужны формы для различных ситуаций, где взаимодействие с пользователем и вашим приложением неизбежно: авторизация, комментарии, обратная связь и многие другие случаи. Если вы что-то напартачите со своей формой, будьте уверены, что вы напартачили и с пользователем.
С учетом этого было выработано несколько правил, которые вам следует соблюдать для того, чтобы сделать свои формы лучше, более дружественными с пользователями. Давайте ознакомимся с небольшой подборкой.
* Ярлыки: ярлыки очень важны. Мы не говорим сейчас о теге "label", мы говорим о том, что нужно четко и ясно дать пользователю понять назначение того или иного поля. Давайте поясним: все поля одинаковы. И только потому, что пользователь видит ярлыки, он понимает, что нужно вписывать в какое поле. Используйте ярлыки, или иконки, или что угодно, лишь бы пользователь понял все сразу и точно.
* Поля: чем более привлекательны ваши поля ввода, тем приятнее на них смотреть и, соответственно, тем более довольным останется пользователь. Создайте немного пространства вокруг полей ввода. Не встраивайте их в контент. Поля ввода должны быть достаточно большими (они должны хотя бы вмещать в себя то, что в них заполняют). Не делайте поля ввода миниатюрными, вынуждая пользователей перемещаться по ним при помощи клавиш стрелок.
* Ярлыки + поля: создайте привязку между вашими полями ввода и соответствующими ярлыками. К ярлыкам примените атрибут "for". Нажимать на поля ввода текста очень просто даже на мобильных устройствах. Нажатие же на чекбокс может вызвать осложнения, особенно если речь идет о мобильной навигации. Если вы реализуете возможность кликать по ярлыку, чтобы поставить отметку в чекбоксе, вы в значительной степени облегчите жизнь пользователей. Также рекомендуем вам делать поля ввода достаточно большими, чтобы их было хорошо видно при просмотре через мобильное устройстве.
* Положения: CSS позволяет нам определять элемент по его текущему положению: hovered, focused, active, default и т.д. Важно показать пользователю, что он наводит курсор на что-то, на что можно кликнуть, либо выделить то, что он может заполнить.
* Кнопка подтверждения: кнопка подтверждения – это последний этап при заполнении формы. Она должна быть хорошо видна. Не забывайте про элементы, побуждающие к действию. Не используйте тот же стиль для кнопки подтверждения, сделайте ее веселее, привлекательнее! Никогда не используйте надпись «Submit»! Она смущает! Если это форма авторизации, то используйте соответствующую надпись «Sign in» или «Log in». Если же это форма комментариев, используйте что-нибудь в жанре «Опубликовать» или «Оставить комментарий». Сообщайте пользователю, для чего предназначена кнопка.
* Атрибуты и поля ввода в HTML5: HTML5 предоставляет нам множество удобных новых атрибутов и полей ввода, что в значительной степени облегчает нам работу с формами. Используйте эти атрибуты и поля ввода по необходимости и, конечно же, не забывайте о запасных вариантах для браузеров без поддержки. Подробнее об этом вы можете прочесть на Wufoo.
Итак, мы рассказали вам всю нужную информацию! Пора приступать к разработке форм, друзья!
Пример 1
Как мы говорили ранее, мы постарались делать каждую форму отличной от других, придать им специфику. В данном примере мы рассмотрим кнопку подтверждения, которая имеет закругленные углы и создает впечатление независимости от экрана.
Разметка
Итак, первый наш пример будет довольно миниатюрным, здесь мы не будем использовать ярлыки. Но нам, конечно же, необходимо рассказать пользователям о том, что им следует вписывать в эти поля, поэтому мы используем… иконки! Маленькие теги «i».
Примечание: как обычно, здесь мы не будем рассказывать о том, как использовать иконические шрифты вроде FontAwesome. Если вы хотите изучить эту тему, то можете на официальном веб-сайте.
У нас есть два контейнера, которые будут оборачивать поле ввода и иконку. Кнопка подтверждения будет в отдельном контейнере, и мы используем «button» вместо «input» с иконкой внутри.
Мы также задействуем заглушки для того, чтобы все было еще больше понятным для поддерживаемых браузеров. Больше информации по поводу браузерной поддержки атрибута placeholder вы можете найти на сайте CanIUse.com.
CSS-код
Давайте начнем со стилизации самого элемента формы. Форма будет основной оболочкой наших демо, поэтому задайте ей ширину и центрируйте при помощи полей.
Form-1 {
/* Size & position */
width: 300px;
margin: 60px auto 30px;
padding: 10px;
position: relative; /* For the submit button positioning */
/* Styles */
box-shadow:
0 0 1px rgba(0, 0, 0, 0.3),
0 3px 7px rgba(0, 0, 0, 0.3),
inset 0 1px rgba(255,255,255,1),
inset 0 -3px 2px rgba(0,0,0,0.25);
border-radius: 5px;
background: linear-gradient(#eeefef, #ffffff 10%);
}
Form-1 .field {
position: relative; /* For the icon positioning */
}
Важно: мы выставили ей относительное позиционирование для того, чтобы кнопку подтверждения позиционировать абсолютно. Мы делаем то же самое с контейнерами.field для того, чтобы также иконки расположить абсолютно.
Говоря об иконках, давайте сразу и сделаем их.
Form-1 .field i {
/* Size and position */
left: 0px;
top: 0px;
position: absolute;
height: 36px;
width: 36px;
/* Line */
border-right: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);
/* Styles */
color: #777777;
text-align: center;
line-height: 42px;
pointer-events: none;
}
Мы добавляем небольшую линию в правую сторону иконки, выставив правую границу и тень блока.
Так как мы хотим поиграть с их цветами для положений:hover и:focus, мы задаем им плавный переход.
Прибавка «pointer-events: none» позволяет нам кликать по области иконки и переносить фокус на поле ввода, которое расположено ниже (то есть, мы как будто кликаем по самому полю).
Теперь нам нужно задать стилизацию полям ввода:
Form-1 input,
.form-1 input {
font-size: 13px;
font-weight: 400;
/* Size and position */
width: 100%;
padding: 10px 18px 10px 45px;
/* Styles */
box-shadow:
inset 0 0 5px rgba(0,0,0,0.1),
inset 0 3px 2px rgba(0,0,0,0.1);
border-radius: 3px;
background: #f9f9f9;
color: #777;
transition: color 0.3s ease-out;
}
Form-1 input {
margin-bottom: 10px;
}
Нам нужно удостовериться в том, что ни иконка, ни кнопка ввода не перекрывают текст. Это можно сделать, задав полю ввода хорошие отступы. Мы также выставляем нижнее поле первому полю ввода для того, чтобы избежать перекрытия второго поля.
Form-1 input:hover ~ i,
.form-1 input:hover ~ i {
color: #52cfeb;
}
Form-1 input:focus ~ i,
.form-1 input:focus ~ i {
color: #42A2BC;
}
Form-1 input:focus,
.form-1 input:focus,
outline: none;
}
Здесь важно отметить две вещи: мы используем родственный селектор (~) для того, чтобы изменить цвет иконок при взаимодействии с полями ввода: светло-голубой для положения при наведении, темно-синий для активного положения. И для браузера Chrome мы исключаем контур.
Последнее, что нам нужно оформить, это кнопка подтверждения. По причине не очень привлекательного наложения (чертов параметр z-index), нам пришлось обернуть её в контейнер для того, чтобы все работало. Мы, вероятно, можем убрать этот контейнер, но тогда нам придется прибегнуть к другим хитрым CSS-трюкам, а нам это ни к чему.
Form-1 .submit {
/* Size and position */
width: 65px;
height: 65px;
position: absolute;
top: 17px;
right: -25px;
padding: 10px;
z-index: 2;
/* Styles */
background: #ffffff;
border-radius: 50%;
box-shadow:
0 0 2px rgba(0,0,0,0.1),
0 3px 2px rgba(0,0,0,0.1),
inset 0 -3px 2px rgba(0,0,0,0.2);
}
Здесь все довольно просто: мы создаем окружность, и располагаем ее поверх нашей формы, немного правее. Тени блока помогут акцентировать этот эффект наложения.
Проблема: тени блока акцентируют этот эффект наложения, но они также могут и испортить его. На самом деле, мы можем видеть тень у рамки формы (пространство между полями и правым отступом у формы).
В целом, мы можем скрыть эти тени масками с тем же фоновым цветом формы. И работа эта предназначена для псевдо-элемента!
Form-1 .submit:after {
/* Size and position */
content: "";
width: 10px;
height: 10px;
position: absolute;
top: -2px;
left: 30px;
/* Styles */
background: #ffffff;
/* Other masks trick */
box-shadow: 0 62px white, -32px 31px white;
}
У нас есть три тени, которые нужно скрыть, так как наш окружный элемент находится в месте пересечения пространства между полями и правым отступом от формы. Мы располагаем первую поверх окружного элемента. И посредством параметра box-shadow мы имитируем две другие маски. Нам кажется, что это довольно сложно объяснить, поэтому мы рекомендуем вам открыть ваш инструмент для разработки и отключить строку box-shadow на.submit:after для того, чтобы понять, что здесь происходит. Последнее, но не менее важное, это сама кнопка подтверждения:
Form-1 button {
/* Size and position */
width: 100%;
height: 100%;
margin-top: -1px;
/* Icon styles */
font-size: 1.4em;
line-height: 1.75;
color: white;
/* Styles */
border: none; /* Remove the default border */
border-radius: inherit;
background: linear-gradient(#52cfeb, #42A2BC);
box-shadow:
0 1px 2px rgba(0,0,0,0.35),
inset 0 3px 2px rgba(255,255,255,0.2),
inset 0 -3px 2px rgba(0,0,0,0.1);
Cursor: pointer;
}
Наконец, мы оформляем положения кнопки при наведении, фокусировки и активном положении (нажатое состояние):
Form-1 button:hover,
.form-1 button:focus {
background: #52cfeb;
transition: all 0.3s ease-out;
}
Form-1 button:active {
background: #42A2BC;
box-shadow:
inset 0 0 5px rgba(0,0,0,0.3),
inset 0 3px 4px rgba(0,0,0,0.3);
}
Все довольно просто: сплошной цвет для положений при наведении и фокусировке. Но погодите, здесь ведь больше! Так как мы используем градацию при стандартном положении, и градации не могут плавно перейти в сплошной текст, браузер сначала отключает градацию, потом применяет фоновый цвет. Такое поведение вызывает вспышку белого цвета, когда вы наводите на кнопку, что, как нам кажется, выглядит классно! Как будто вспышка света!
Пример 2
Следующий пример не такой простой, и предусматривает некоторые новые опции: кнопку «Sign in with Twitter», и переключатель «Show password». Здесь нам потребуется некоторый код javascript.
Разметка
Здесь мы будем использовать заголовок. Мы использовали h1, но вы можете использовать что захотите. Мы также использовали ярлыки, привязанные к полям ввода посредством атрибута "for".
CSS-код
Давайте начнем с того, что зададим некоторые основные стили всей форме:
Form-2 {
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;
/* Styles */
background: #fffaf6;
border-radius: 4px;
color: #7e7975;
box-shadow:
0 2px 2px rgba(0,0,0,0.2),
0 1px 5px rgba(0,0,0,0.2),
0 0 0 12px rgba(255,255,255,0.4);
}
Мы создадим полу-прозрачную границу, применив тени блока.
Теперь, когда мы задали нашей форме базовую стилизацию, давайте поработаем над заголовком. В заголовке у нас три разных стиля: bold (полужирный), caps (заглавные буквы) и dark grey (темно-серый); bold (полужирный), caps (заглавные буквы) и orange (оранжевый), а также light (уточненный), low (прописные буквы) и light grey (светло-серый). Итак, основной стиль + 2 добавочных:
Form-2 h1 {
font-size: 15px;
font-weight: bold;
color: #bdb5aa;
padding-bottom: 8px;
border-bottom: 1px solid #EBE6E2;
text-shadow: 0 2px 0 rgba(255,255,255,0.8);
box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
Form-2 h1 .log-in,
.form-2 h1 .sign-up {
display: inline-block;
text-transform: uppercase;
}
Form-2 h1 .log-in {
color: #6c6763;
padding-right: 2px;
}
Form-2 h1 .sign-up {
color: #ffb347;
padding-left: 2px;
}
Далее мы используем два параграфа, которые будут расположены рядом друг с другом. Каждый будет занимать 50% доступного пространства в элементе "form\ и, благодаря “border-box” box-sizing, отступы будут высчитываться внутри этих 50%. Поэтому мы можем создать промежуток между этими двумя элементами.
Form-2 .float {
width: 50%;
float: left;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,1);
}
Form-2 .float:first-of-type {
padding-right: 5px;
}
Form-2 .float:last-of-type {
padding-left: 5px;
}
Наши оболочки выставлены. Давайте стилизуем элементы внутри них! У нас есть ярлык и поле ввода. В данном примере иконка внутри ярлыка:
Form-2 label {
display: block;
padding: 0 0 5px 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: 400;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
font-size: 11px;
}
Form-2 label i {
margin-right: 5px; /* Gap between icon and text */
display: inline-block;
width: 10px;
}
Примечание: использование cursor: pointer на ярлыках помогает пользователям понять, что они могут кликнуть по этому элементу. Это очень важный момент.
Form-2 input,
.form-2 input {
font-family: "Lato", Calibri, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
display: block;
width: 100%;
padding: 5px;
margin-bottom: 5px;
border: 3px solid #ebe6e2;
border-radius: 5px;
transition: all 0.3s ease-out;
}
Не забудьте о положениях при наведении и фокусировании:
Form-2 input:hover,
.form-2 input:hover {
border-color: #CCC;
}
Form-2 label:hover ~ input {
border-color: #CCC;
}
Form-2 input:focus,
.form-2 input:focus {
border-color: #BBB;
outline: none; /* Remove Chrome"s outline */
}
Посмотрите, как мы используем родственный селектор (~) для того, чтобы запустить положение hover у полей ввода тогда, когда мы наводим курсор на ярлыки. Круто, не правда ли?
Теперь, что касается кнопок подтверждения. Но погодите, так как они обе плавают в собственном контейнере, нам ведь нужно применить к ним clearfix. Не забыли, как мы должны это делать?
Clearfix:after {
content: "";
display: table;
clear: both;
}
Form-2 input,
.form-2 .log-twitter {
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;
/* Styles */
box-shadow: inset 0 1px rgba(255,255,255,0.3);
border-radius: 3px;
cursor: pointer;
/* Font styles */
font-family: "Lato", Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
}
Form-2 input {
margin-left: 1%;
background: linear-gradient(#fbd568, #ffb347);
border: 1px solid #f4ab4c;
color: #996319;
text-shadow: 0 1px rgba(255,255,255,0.3);
}
Form-2 .log-twitter {
margin-right: 1%;
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}
Обе кнопки имеют в ширине 49%, а также левые/правые поля, что позволяет создать между ними небольшой промежуток. Теперь мы прибавим к ним положение при наведении (hover) и активное положение.
Form-2 input:hover,
.form-2 .log-twitter:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}
Form-2 input:active,
.form-2 .log-twitter:active{
top: 1px;
}
Благодаря относительному позиционированию, мы можем применить top: 1px к кнопкам в активном положении для того, чтобы они создавали впечатление, будто мы их нажимаем.
Важно: для браузеров, которые не поддерживают box-shadow (а такие все еще остались), мы используем изменение в background-color. Класс "no-boxshadow" будет применяться к HTML посредством Modernizr в случае, если браузер не поддерживает тени блоков. Это очень хороший пример того, как мы можем быстренько создать запасной вариант для старых браузеров:
No-boxshadow .form-2 input:hover {
background: #ffb347;
}
No-boxshadow .form-2 .log-twitter:hover {
background: #2a8ac4;
}
javascript-код
Эй, не забыли ли мы о нашей маленькой функции отображения пароля? Как раз ей мы сейчас и займемся! Для начала давайте выясним, знали ли вы, что мы не можем изменить атрибут "type" у элемента ввода? Невозможно! Для того, чтобы сделать надпись "show password" переключателем, нам нужно удалить имеющееся поле пароля, и вместо него создать поле текстового ввода.
Мы нашли небольшой от Aaron Saray, который поможет нам справиться с этой задачей. Давайте посмотрим:
$(function(){
$(".showpassword").each(function(index,input) {
var $input = $(input);
$("
").append(
$("").click(function() {
var change = $(this).is(":checked") ? "text" : "password";
var rep = $("")
.attr("id", $input.attr("id"))
.attr("name", $input.attr("name"))
.attr("class", $input.attr("class"))
.val($input.val())
.insertBefore($input);
$input.remove();
$input = rep;
})
).append($("
Он обозначает все элементы ввода классом.showpassword.
Создает новый контейнер (.opt).
Внутри этого контейнера он создает чекбокс с ярлыком, привязанным к нему.
Он вставляет контейнер после родительского элемента поля.showpassword.
Когда по чекбоксу производится клик, он удаляет элемент ввода.showpassword, и создает вместо него еще один, но уже с соответствующим атрибутом "type".
Давайте не будем забывать о стилизации чекбокса и нового ярылка.
Form-2 p:last-of-type {
clear: both;
}
Form-2 .opt {
text-align: right;
margin-right: 3px;
}
Form-2 label {
display: inline-block;
margin-bottom: 10px;
font-size: 11px;
font-weight: 400;
text-transform: capitalize;
}
Form-2 input {
vertical-align: middle;
margin: -1px 5px 0 1px;
}
Последнее, но не менее важное то, что нам нужно добавить несколько строк кода jQuery, чтобы изменить иконку тогда, когда в чекбоксе будет стоять отметка! Просто очень просто, но невероятно эффективно!
$("#showPassword").click(function(){
if($("#showPassword").is(":checked")) {
$(".icon-lock").addClass("icon-unlock");
$(".icon-unlock").removeClass("icon-lock");
} else {
$(".icon-unlock").addClass("icon-lock");
$(".icon-lock").removeClass("icon-unlock");
}
});
Пример 3
Этот пример был создан под вдохновением от старой работы от Virgil Pana на Dribbble. К сожалению, он, по всей видимости, убрал эту работу с сайта, поэтому мы не сможем показать вам оригинальную идею. В любом случае, вы наверное догадались, что данный пример наглядно показывает нам, как можно создать невероятный световой эффект при помощи CSS.
Разметка
Посмотрите, как мы представляем новую функцию в этой форме: опция "Remember Me". Это нечто конкретное для форм авторизации, так как эта опция позволяет приложению запоминать авторизовавшихся пользователей.
CSS-код
Form-3 {
font-weight: 400;
/* Size and position */
width: 300px;
position: relative;
margin: 60px auto 30px;
padding: 10px;
overflow: hidden;
/* Styles */
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);
}
Тень под формой авторизации выглядит особенным образом из-за отрицательного радиуса. Мы можем примерно так использовать тень.
Давайте немного углубимся в структуру нашей формы. Что касается полей, то здесь мы используем два тега p, обволакивающих ярлык и элемент ввода, оба из которых плавающие. Это означает, что нам нужно к нашим контейнерам применить clearfix (смотрите предыдущий пример).
Давайте добавим стилизацию к нашим ярлыкам и полям ввода текта и пароя, а также доведем до ума их положения при наведении и фокусировании:
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,
.form-3 input {
/* 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:hover,
.form-3 input:hover,
.form-3 label:hover ~ input,
.form-3 label:hover ~ input {
background: #27292c;
}
Form-3 input:focus,
.form-3 input:focus {
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #51cbee;
outline: none; /* Remove Chrome outline */
}
Теперь, когда у нас есть привлекательные поля ввода, нам нужно создать небольшой чекбокс для опции "Remember Me", а также кнопку подтверждения. Эти две вещи будут выравнены друг за другом:
Form-3 p:nth-child(3),
.form-3 p:nth-child(4) {
float: left;
width: 50%;
}
Мы воспользуемся расширенными CSS-селекторами для их определения, но вы можете использовать класс, если хотите (либо если вам приходится, для поддержки устаревших браузеров). В любом случае, давайте приступим к разработке чекбокса и его ярлыка:
Form-3 label {
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 {
margin-left: 10px;
vertical-align: middle;
}
Так как данный ярлык сильно отличается от других, нам нужно изменить пару вещей, чтобы он был полностью корректен. Лучше всего будет сначала исключить все ранее выставленные стили. Что касается чекбокса, то мы добавляем маленькое поле к его правой стороне, чтобы ярлык к нему не «прилипал», а также немного подправим вертикальное выравнивание.
Наконец, наша кнопка подтверждения с положением при наведении курсора:
Form-3 input {
/* 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:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
Form-3 input: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: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. Если вы не сделаете этого, то вы не сможете нажимать на поля ввода, так как поверх них будет расположен еще один слой. Нам нужно будет убрать отражение в браузерах, которые не поддерживают pointer-events:
No-pointerevents .form-3 p:nth-child(1):before {
display: none;
}
Пример 4
Особенность этого примера заключается в отсутствии ярлыков. Или иконок. Да, мы знаем, что раньше говорили о том, что нам необходимо иметь что-то, что сообщает пользователям предназначение полей. И у нас здесь все будет! У нас будут заглушки. А для браузеров, которые их не поддерживают, мы сделаем видимые ярлыки!
Разметка
Позвольте нам представить "required" атрибут. Когда он поддерживается, он позволяет браузеру проверить, заполнено ли поле или нет, а также соответствующим образом подтвердить форму.
Важно: рекомендуем вам всегда создавать проверку подтверждаемой формы на стороне сервера. С помощью веб-инспектора без труда можете исключить атрибут, а также может быть отключена поддержка javascript, поэтому мы не рекомендуем вам полагаться только на проверку на стороне клиента.
CSS-код
Как обычно, давайте начнем с формы и заголовка, так как здесь все очень просто.
Form-4 {
/* Size and position */
width: 300px;
margin: 60px auto 30px;
padding: 10px;
position: relative;
/* Font styles */
color: white;
text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}
Form-4 h1 {
font-size: 22px;
padding-bottom: 20px;
}
Дальше мы переходим к элементам ввода:
Form-4 input,
.form-4 input {
/* 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:
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;
}
Давайте изменим стиль заглушек (где это возможно):
Form-4 input::-webkit-input-placeholder {
color: rgba(37,21,26,0.5);
}
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);
}
Далее, давайте добавим стилизацию элементов при наведении и фокусировании:
Form-4 input:hover,
.form-4 input:hover {
border-color: #333;
}
Form-4 input:focus,
.form-4 input:focus,
.form-4 input: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:focus,
.no-boxshadow .form-4 input:focus {
outline: 1px solid white;
}
А также кнопку подтверждения:
Form-4 input {
/* 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: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:hover {
background: #594642;
}
А теперь, давайте разберемся с нашим запасным вариантом на случай отсутствия поддержки элемента "placeholder". Заглушка или "placeholder" не является критически важным элементом, насколько нам известно, пока вы не полностью полагаетесь только не него. В данном случае, нам как раз нужно предоставить запасной вариант.
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;
}
Все очень просто: если не поддерживаются заглушки, то ярлыки становятся видимыми. Конец истории.
Пример 5
Последний пример представляет нам минималистичную форму в стеклянном стиле. Мы не будем использовать ярлыки, и все здесь будет выглядеть компактно. Мы будем вращать текст кнопки подтверждения и сделаем так, чтобы стрелочка появлялась при наведении.
Разметка
Минималистичная разметка для минималистичной формы.
CSS-код
Form-5 {
/* Size and position */
width: 300px;
margin: 60px auto 30px;
position: relative;
/* Styles */
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);
}
Давайте оформим наши параграф и поля ввода:
Form-5 p {
width: 70%;
float: left;
border-radius: 5px 0 0 5px;
border: 1px solid #fff;
border-right: none;
}
Form-5 input,
/* Size and position */
width: 100%;
height: 50px;
padding: 0 10px;
/* Styles */
border: none; /* Remove the default border */
background: white; /* Fallback */
background: rgba(255,255,255,0.2);
box-shadow:
inset 0 0 10px rgba(255,255,255,0.5);
/* Font styles */
font-family: "Montserrat", sans-serif;
text-indent: 10px;
color: #ee4c8d;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
font-size: 20px;
}
Form-5 input {
border-bottom: 1px solid #fff; /* Fallback */
border-bottom: 1px solid rgba(255,255,255,0.7);
border-radius: 5px 0 0 0;
}
Form-5 input {
border-top: 1px solid #CCC; /* Fallback */
border-top: 1px solid rgba(0,0,0,0.1);
border-radius: 0 0 0 5px;
}
Давайте добавим сюда немного стилизации при наведении и заглушки:
Form-5 input:hover,
.form-5 input:hover,
.form-5 input:focus,
.form-5 input:focus {
background: #f7def7; /* Fallback */
background: rgba(255,255,255,0.4);
outline: none;
}
Form-5 input::-webkit-input-placeholder {
color: #fff;
}
Form-5 input:-moz-placeholder {
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-family: "Handlee", cursive;
}
Form-5 input:-ms-input-placeholder {
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-family: "Handlee", cursive;
}
А теперь, пришло время перейти к кнопке подтверждения. Маленький i-элемент будет содержать иконку стрелки, но сейчас мы не будем делать ее видимой, только при наведении. Обратите внимание на то, что мы используем span-элемент внутри кнопки для того, чтобы вращать текст без вращения кнопки.
Form-5 button {
/* Size and position */
width: 30%;
height: 102px;
float: left;
position: relative;
overflow: hidden;
/* Styles */
background:
url(../images/noise.png),
radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);
border-radius: 0 5px 5px 0;
box-shadow:
inset 0 0 4px rgba(255, 255, 255, 0.7),
inset 0 0 0 1px rgba(0, 0, 0, 0.2);
border: none;
border-left: 1px solid silver;
cursor: pointer;
line-height: 102px; /* Same as height */
}
Form-5 button i {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -20px;
font-size: 64px;
line-height: 109px;
color: #8d1645;
opacity: 0;
transition: all 0.2s ease-out;
}
Form-5 button span {
display: block;
/* Font styles */
color: #8d1645;
font-family: "Montserrat", Arial, sans-serif;
font-size: 20px;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
transform: rotate(-90deg);
transition: all 0.2s linear;
}
В случае, если браузер не поддерживает параметр "transform", текст просто не будет вращаться. Невелика потеря.
Мы также добавили незначительную текстуру к кнопке, применив два фона: текстуру и радиальную градацию, которая расположена под текстурой.
Теперь давайте перейдем к эффекту при наведении, фокусировании и активном положении. При наведении мы сделаем так, чтобы span-элемент сдвигался влево и растворялся, и появлялась стрелка:
Form-5 button:focus {
outline: none;
}
Form-5 button:hover span,
.form-5 button:focus span {
opacity: 0;
transform: rotate(-90deg) translateY(-20px);
}
Form-5 button:hover i,
.form-5 button:focus i {
opacity: 0.5;
left: 0;
transition-delay: 0.2s;
}
/* Click on button */
Form-5 button:active span,
.form-5 button:active i {
transition: none;
}
Form-5 button:active span {
opacity: 0;
}
Form-5 button:active i {
opacity: 0.5;
left: 0;
color: #fff;
}
Когда мы кликаем по кнопке, нам не требуется никаких переходов, поэтому все выглядит довольно опрятно.
javascript-код
Давайте здесь используем немного javascript для того, чтобы имитировать работу HTML5-параметра Placeholder в браузерах, которые не имеют соответствующей поддержки. Мы воспользуемся jQuery-плагином от Mathias Bynens. За подробностями обратитесь к репозиторию .
После включения jQuery и скрипта, мы просто вызываем его следующим образом:
$(function(){
$("input, textarea").placeholder();
});
И это добавит имитацию заглушки в старые версии браузеров.
Внимание! У вас нет прав для просмотра скрытого текста.
Итак, есть задача — сделать регистрацию в системе и возможность авторизации. Как это делать? Начнем по порядку.
Регистрация на php
Тут все просто. Делается хранилище данных для пользователей. Обычно это таблица БД. В нее входят такие поля как id, username и password. Остальные поля опциональны. Вы можете собирать e-mail пользователей, их адреса, возможные ip, время выхода в сеть, кодовые слова от банковских карт, секретные вопросы...
В общем, главное — это пара логин-пароль.
Первый важный момент — нельзя хранить пароли пользователей в открытом виде. То есть, как текст. Нельзя потому что если к БД получит доступ кто-то посторонний — он получит базу логин-паролей пользователей, что вряд ли им понравится. А если учесть что логин-пароль у многих пользователей на разных сервисах одни и те же — это ставит под угрозу и личные данные и финансы и личную переписку и все что угодно.
Пароли надо хранить в виде хэша. Хэширование — это операция, которая превращает исходные данные в какой-то слепок известной длины. Это хорошо тем, что слепок уникален. То есть, если мы изменим в исходных данных хотя бы один символ — слепок на выходе операции хэширования получится совершенно, до неузнаваемости другим. Операция хэширования необратима, то есть, из этого слепка не получится развернуть исходные данные. Этим оно и отличается от шифрования.
В MySQL и php есть одна и та же распространенная и безопасная функция хэширования — md5. Этот алгоритм принимает данные и отдает отпечаток.
Итак, мы получаем данные от пользователя, проверяем не пустые ли они, не содержат ли всяких ненужных нам символов (не ограничивайте пользователей слишком сильно). И теперь делаем запрос вроде этого:
INSERT INTO `users` (`id`,`username`,`password`) VALUES("",$quoted_username,MD5($quoted_password));
Обратите внимание — я специально обозвал переменные $quoted_ потому что перед запихиванием их в запрос их обязательно надо отэскейпить функцией mysql_real_escape_string(). Так как эта функция очень часто используется, а пишется очень длинно (люблю архитекторов пхп) — я рекомендую запихать ее в свою оболочку. Например, так:
Function quote($var) { return mysql_real_escape_string($var); }
Авторизация на php
Мы добавили нового пользователя и теперь он авторизуется. Мы рисуем ему форму логина-пароля и ловим его данные. Что дальше? Ведь пароль нам пришел в открытом виде, а в базе — хэш пароля. Придется конвертировать пароль в хэш, потом сравнивать их? Не, можно сделать проще — в один запрос.
SELECT * FROM `users` WHERE `login`=$qoted_login AND `password`=MD5($quoted_password);
Если запрос вернет строку — это будет строка с данными пользователя. Если нет — такого пользователя в таблице нет. Данные пользователя очень нам пригодятся — стоит их получить в ассоциативный массив.
Запомнить пользователя
Теперь нам надо запомнить что пользователь авторизован и точно знать кто это. Первое что приходит в голову — использовать для этого куки. Действительно — запихать в куки логин и id пользователя и всегда знать кто запрашивает страницу в данный момент.
Но это порочная практика. Почему? Потому что куки — это файл, который хранится у пользователя в браузере и данные из этого файла передаются серверу в каждом запросе. Во-первых, они передаются как текст, а это значит — их легко перехватить. Во-вторых, это простой текст, посылаемый пользователем. Поэтому его можно буквально переписать. Например, если мы решили хранить в куках логин пользователя "Вася" он может открыть управление куками в своем браузере, найти нужную куку и исправить ее на, скажем, "Admin". И все. Теперь при каждом запросе мы будем получать куку, которая нам будет сообщять юзернейм пользователя — "Admin".
Поэтому безопаснее хранить все данные на сервере в недоступном из веба месте. В какой-то папке, к которой нельзя получить доступ из браузера. В эту папку нужно писать все данные о пользователе и читать их оттуда каждый раз, когда он запрашивает документ. Чтобы узнать какому пользователю принадлежит какой файл данных — надо обзывать файл уникальным именем и вот это имя кидать уже пользователю в куки. Таким образом, пользователь не сможет узнать как называется файл для пользователя Admin — этот файл генерирует система на сервере. И это позволяет таскать от документа к документу хоть пароли в открытом виде.
То что я описал — это механизм сессии . В Perl, например, для использования сессий нужно загружать модули. А в php сессии поддерживаются из коробки. Фактически, все что вам нужно знать — это функция session_start() и массив $_SESSION. Это все. Сейчас расскажу.
В каждом скрипте, где вы будете писать в сессию или читать из нее, вам надо до того, как вы выведете какую-то информацию вызвать функцию session_start(). Это запустит сессию. Эта функция создаст файл сессии если его нет или прочитает его если скрипту была передана специальная кука.
Чтобы записать в сессию данные нужно просто записать их в массив $_SESSION. Сейчас нам надо помнить id юзера.
$_SESSION["userid"] = $userinfo["id"];
Все. Теперь каждый раз когда пользователь будет запрашивать скрипт, который использует сессии — вам будет доступно значение элемента $_SESSION["userid"].
Поэтому когда пользователь ввел логин и пароль, мы получили его данные из БД, что подтверждает что такой пользователь есть в нашей базе данных, мы запоминаем его в сессии.
Узнать авторизован ли пользователь
Ну это уж проще простого! Теперь, когда вы знаете как работают сессии — узнать авторизован ли пользователь — дело одной строки. Вот она:
If(isset($_SESSION["userid"])) { print "пользователь авторизован"; }
Если в сессии определен id пользователя, значит он уже прошел авторизацию. Но как узнать какой именно это пользователь? Какой его логин? Дата рождения? Кодовое слово для банковской карты? Девичья фамилия матери?
Ну очевидно — сделать один запрос к таблице users. У нас же есть id этого пользователя.
SELECT * FROM `users` WHERE `id`=$quoted_userid
Как разлогинить пользователя, сделать выход
Ну это уж совсем просто. Если мы определяем авторизован ли пользователь по наличию userid в сессии, то чтобы его разлогинить нужно удалить его оттуда. Делается так:
Unset($_SESSION["userid"]);
Еще можно убить сессию для верности. Это очистит куку у пользователя и уничтожит файл сессии на сервере. При этом из нее пропадут все данные. Делается так:
Session_destroy();
На этом все. Если остались какие-то вопросы — не стесняйтесь обращаться. Более того, вы можете обратиться ко мне по icq или почте и попросить помочь с чем-нибудь. Я обычно не отказываю. Если помощь потребуется серьезная — я могу попросить небольшую оплату. Кроме того, я могу дистанционно учить вас делать сайты! Вот такой я коуч и гуру:) А если вы хотите получать уроки и трюки просто так, бесплатно — подпишитесь на RSS моего блога .
Спонсор этого поста — ibooknet.ru, который предлагает ремонт ноутбуков по приятным ценам. Лично мой ноут в порядке и надеюсь, мне не придется его чинить. Чего и вам желаю.
Всем привет. Итак, мы изучили несколько элементов для создания форм. Пришло время объединить наши знания для решения задачи побольше. Давайте создадим самую простую форму для авторизации на сайте. Для этого нам необходимы два поля, делаем и привязываем к ним подписи.
Первое поле – для логина, второе – для пароля. И вот со вторым не все так просто. Поскольку на текущий момент оно представляет собой просто поле для ввода текста.
Результат в браузере:
Чтобы введенный в нем текст заменялся на звездочки, как это принято для поля такого типа, необходимо сделать одно простое действие. А именно, осуществить замену значения атрибута type на password :
Результат:
Кнопка отправки формы
Ну, вот. Наша форма уже почти готова. Теперь, чтобы завершить ее создание, необходимо сделать кнопку, которой будет осуществляться отправка формы. Задача решается с применением тега с типом submit .
Если на кнопке должна присутствовать какая-то надпись, то ее можно сделать, используя атрибут value . Задавать имя кнопке или нет – на ваше усмотрение, то если вы это сделаете, то сервер будет получать это имя, а также значение кнопки.
Как правило, в имени кнопки отправки формы есть потребность тогда, когда у формы есть несколько кнопок, каждая из которых выполняет определенное действие. Благодаря этому сервер, получая от браузера имя и значение кнопки, понимает, на какую именно кнопку нажал пользователь и что, соответственно, необходимо выполнить.
В итоге код нашей формы получится следующим:
Результат в браузере:
В формате данного урока создадим форму авторизации на CSS , покажу, как подключать шрифтовые иконки, каким образом задавать прозрачность у элементов, задействуем в форме анимированные эффекты при наведение.
Каркас формы в HTML
Первым создаем каркас формы. Открываем заготовку html и пропишем следующий код между тегами.
Создаем блок, который будет являться контейнер для формы. Присвоим ему класс .container , в нем размещаем форму с input Первый input для ввода логина type="text" name="username" placeholder="Введите логин" , второй input type="password" name="password" placeholder="Введите пароль" принимает пароль и за ним кнопка submit . Ниже размещаем надпись для восстановления пароля, сделаем ее простой ссылкой.
Описываем в CSS элементы формы
Затем оформим данные элементы формы. Создадим дополнительную директорию CSS в которой будем размещать файлы стилей. В ней создаем файл style.css и подключаем его к нашей страничке.
Я предлагаю на задний фон поставить изображение, для этого создадим дополнительную директорию img
, и поместим в нее свое изображение. Подключаем картинку в style.css
для body
. Прописываем путь до картинки, выходим с текущей директории, заходим в папочку img
, и далее название картинки.
Body{ background-image: url("../img/bg.png"); }
A{ color: #fff; } a:hover{ text-decoration: none; }
Предадим стили контейнеру с формой .container
. Зададим ширину в 450 пик., и временно установим высоту в 500 пик. Зададим цвет #182134
, и отцентрируем ее посередине экрана margin: 250px auto 0 auto;
. Текст в нутрии блока размещаем по центру, сверху сделаем отступ в 20 пик.
Container{ width:450px; height: 500px; background-color: #182134; margin: 250px auto 0 auto; text-align: center; }
Оформим затем input для ввода логина и пароля. Что бы не затронуть кнопку, отберем их по атрибутам text и password , указываем ширину в 300 пик. , высоту в 50 пик. Текст увеличиваем на 18 пик., сделаем отступы между ними в 25 пик., закруглим углы border-radius: 4px; , текст сдвинем на 10 пик. влево.
Input,input{ width: 300px; height:50px; font-size: 18px; margin-bottom: 25px; border-radius: 4px; padding-left: 10px; }
Затем отцентруем inpyt
, для этого обернем их в дополнительный блок и присвоим класс .dws-input
. Сделаем перенос строки после кнопки, и вверху перед кнопкой вставим картинку с нашим логотипом. Для этого скопируем ее в папку img
, и пропишем к ней путь img src="img/men.png"
.
Далее опишем ее стили. Картинке присвоим ширину и высоту по 120 пик. , затем подымем ее чуть выше формы margin: -60px 0 30px 0; , делаем об водку в 5 пик. border: 5px solid #1a394f; , закругляем углы в 50%.
Container img{ width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; }
Теперь опишем стили кнопки. Присвоим ей класс .dws-submit , и назначаем ей стили. Назначаем отступы, увеличим текст на 15 пик., делаем его белым, а фон кнопки синим, убираем об водку и сделаем в низу плашку, а также курсор Pointer .
Dws-submit { padding: 13px 30px; margin: 5px 0 20px 0; font-size: 15px; color: #fff; background-color: #2ca8c6; border: none; border-bottom: 4px solid #6ee9fd; cursor: pointer; }
Чтобы отцентровать инпуты и кнопку, поместим их отдельно каждый в свой блок. Опишем стили кнопке при наведении. Делаем плавный переход, цвет кнопки меняем на белый, а в тоже время шрифт будет меняться на темный.
Dws-submit:hover{ transition: all 0.5s; background: #fff; color: #2c536c; }
Сделаем, сверху нашей формы синею плашку, box-shadow: 0 -5px 0 #3adbfd; , и добавим ее к картинке box-shadow: 0 -5px 0 #3adbfd; . Сделаем фон формы немного прозрачнее, для этого пропишем этот цвет в формате RGBA .
Я пользуюсь сервисом w3schools.com , спускаемся вниз до Color Picker , в форму введем наш цвет и преобразуем его в RGB . Копируем, вставляем в стиль контейнера.
Container{ width:450px; height: 500px; background-color: rgba(24, 33, 52, 0.7); margin: 250px auto 0 auto; text-align: center; box-shadow: 0 -5px 0 #3adbfd; } .container img{ width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; box-shadow: 0 -5px 0 #3adbfd; }
Для эффекта, закруглим нижние углы, для этого пропишем border-radius: 0 0 10px 10px;
.
Добавление шрифтовых иконок
Добавим иконки в виде шрифтов, переходим на сервис fontawesome.io и скачиваем их к себе на компьютер. Распакуем архив, копируем папку fonts, в которой находятся шрифты, и копируем файл стилей в директории css. Затем подключаем стили к страничке.
Отберем иконки для наших инпутов, для этого переходим на страничку Icons , первый подключим стиль для ввода логина, используем user , копируем его код f007 , и описываем его в стилях при помощи псевдоэлемента.
Подключаем шрифты font-family: "FontAwesome"; ,затем саму иконку, позиционируем ее абсолютно поля, увеличим ее на 30 пик, отцентруем и изменим цвет.
Dws-input::before{ font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; }
Немного подвинем текст в input - padding-left: 40px; .
Отберем вторую иконку с названием lock , копируем ее код f023 , и описываем ее стили.
Для этого отбираем второй элемент .dws-input:nth-child(2)::before{}
, и прописываем картинку content: "\f023
";.
Dws-input::before{ font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; } .dws-input:nth-child(2)::before{ content: "\f023"; }
Dws-input:hover::before{ color: #319ebc; transition: all 0.3s; }
А также, стили наведение для инпутов.
Dws-input input:hover{ box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.35); }
Для удобства обернем их в блок с классом .social
и опишем их стили. Изменим их цвет на белый, увеличим на 20 пик., сделаем шириной в 20 пик., и дадим отступы.
Dws-social i{ color: #fff; font-size: 20px; width: 20px; padding: 10px; }
Затем опишем стили при наведении. Сделаем белый блок, фон иконки изменим на темный, закруглим углы и при наведение отобразим курсор.
Social i:hover{ background-color: #fff; color: #1a394f; border-radius: 5px; cursor: pointer; }
Уберем высоту блока формы, которую задавали в самом начале, а в место ее добавим нижний отступ padding-bottom: 20px; .
В принцыпе и все, получилась довольно симпатичная форма, которую можно подключить на сайт и использовать для авторизации.
Пробуйте сделать на примере данного урока что нибудь свое оригинальное, тренируйтесь, и не забывайте делится данным материалом.
