Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> CSS

5 прекраснейших дизайнерских решений для ваших форм входа


Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!


    Всем большой привет! Я вернулся к вам с замечательным CSS уроком! Мы уже успели создать различные выпадающие меню, но сейчас, давайте создавать формы. В частности, мы займёмся созданием форм регистрации.
    В настоящее время, почти каждая веб-служба, приложение, игра и т.д. позволяют (или даже требуют) пользовательской авторизации, что означает, что все эти службы нуждаются в определённой форме для регистрации и входа пользователей.
    Имея это в виду, я попытался создать несколько различных форм, некоторые из которых основываются на концепции современного дизайна в интернете. Цель – создать нечто привлекательное и дружелюбное.

   Прежде чем начать, давайте ознакомимся с некоторыми важными моментами:

  • Для упрощения кода, префиксы использоваться не будут, но вы сможете их найти в файлах примера;
  • Цель статьи – показать потенциал CSS, в особенности CSS3, поэтому с IE8 и ниже, могут возникнуть проблемы. Если вы планируете поддерживать и более старые версии, не забудьте создать стили отката;
  • При создании форм, я не использовал какие – либо атрибуты action или method поскольку основной упор, был сделан на дизайне;
  • Лично я использую блочную модель, где [width] = [element-width] + [padding] + [borders].  Её активация происходит так:
*,
*:after,
*:before {
    box-sizing: border-box;
}

    Несколько слов об удобстве

    Для вашего приложения или веб-сайта, зачастую необходимо несколько форм для взаимодействия с пользователем, например: авторизация, комментарии, обратная связь и многое другое. Если вы запутаетесь с формами, ваши пользователи тоже не смогут разобраться с ними.
   Имея это в виду, давайте рассмотрим несколько полезных вещей, чтобы сделать наши формы более дружелюбными. Давайте сделаем что-нибудь маленькое и круглое, вы со мной?

    МЕТКИ: метки очень важны. Я даже не говорю о самом теге label, а о тексте в поле, которое видит пользователь до ввода текста. Давайте внесём ясность: все поля одинаковые. И чтобы пользователь не запутался с вводом данных, нам необходимо рассказать ему, зачем нужно то или иное поле, дав краткое описание. Используйте метки или пиктограммы, или всё что необходимо сделать, для того чтобы пользователь мог понять, что писать в том или ином поле.

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

   МЕТКИ + ПОЛЯ: создавайте связи между полями ввода и метками. Используйте атрибуты меток. Нажать по textarea просто, даже для мобильных устройств. А вот попасть по полю ввода на том же мобильном устройстве, уже будет сложнее. Создавайте интерактивные метки, это сделает вашу жизнь проще. Используйте их. Сделайте ваши поля ввода для мобильных устройств больше, особенно если метка не может быть кликабельна.

   СОСТОЯНИЯ: CSS позволяет  создавать как адресные, так и общие стили для состояний элементов: активный, посещённый, получивший фокус и по умолчанию. Важно, чтобы пользователь видел, какие ссылки он уже посетил, а так же какой элемент вообще является ссылкой.

   КНОПКА ОТПРАВКИ: после заполнения всех необходимых полей - это последний шаг пользователя по взаимодействию с вашей формой. Она должна быть легко отличимой. Помните, он должна содержать «Призыв к действию». В этом случае, не используйте стили по умолчанию, сделайте что – ни будь оригинальное! И никогда не используйте слово “Submit”. Странное слово. Если это форма для входа, лучше назвать её «вход» или «авторизация». Если это форма отправки комментариев, то текст можно написать такой «оставить комментарии». И не забывайте сообщить пользователю, что действие выполнено.

   HTML5 ПОЛЯ ВВОДА И АТРИБУТЫ: HTML5 предоставляет большой набор новых атрибутов для полей ввода, это может помочь сделать заполнение форм более приятным процессом. Используйте эти атрибуты и поля ввода при необходимости, и не забывайте об откатах. Более подробней об этом на Wufoo.

   Друзья, мы закончили с основами, и теперь готовы создавать формы, вперёд!

   Пример 1

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

   Разметка

<form class="form-1">
    <p class="field">
        <input type="text" name="login" placeholder="Username or email">
        <i class="icon-user icon-large"></i>
    </p>
        <p class="field">
        <input type="password" name="password" placeholder="Password">
        <i class="icon-lock icon-large"></i>
    </p>        
    <p class="submit">
        <button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button>
    </p>
</form>

   Итак, первый пример довольно минималистичен, и в нём мы будем использовать некоторые значки. Но в то же время, мы должны объяснить пользователю, какие данные и куда вводить, поэтому мы используем… иконки. Они будут располагаться в тегах <i>.
   Примечание: как обычно, я не буду уточнять как использовать шрифты FontAwesome. Если вы всё же хотите узнать об этом больше, то просмотрите примеры на их сайте.
   В принципе, у нас всего 2 контейнера, один обёртка для поля ввода, другой для иконки. Кнопка «Отправить» находится в своём собственном контейнере, и для неё мы используем тег <button/>  с иконкой внутри, а не <input/>.
   Для создания интерактивных подсказок для полей ввода, мы будем использовать placeholder. Всю необходимую информацию о нём, и о поддержке его в браузерах, вы можете найти на CanIUse.com.

   CSS

   Давайте начнём со стилей для самой формы. Тег form является обёрткой для нашего примера, поэтому мы зададим необходимые отступы с помощью margin, и укажем необходимую ширину.

.form-1 {
    /* Размер и положение */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative; /* Для позиционирования кнопки submit */
 
    /* Стили */
    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; /* Для позиционирования иконок */
}

   Важно: положение формы мы установили в относительное, чтобы кнопку отправки разместить абсолютно. То же самое, мы сделаем и для .field контейнеров, в которых размещаются наши иконки, они так же будут абсолютно позиционироваться.
   Раз разговор зашёл об иконках, давайте сразу разберёмся и с ними.

.form-1 .field i {
    /* Размер и положение */
    left: 0px;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;
 
    /* Линия */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);
 
    /* Стили */
    color: #777777;
    text-align: center;
    line-height: 42px;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

   Для добавления тонких линий с правой стороны иконки, у правой её границы мы установим тень.
   Так же для состояний иконок :hover и :focus мы будем играть с цветом, задавая ему плавный переход.
   Добавление “pointer-events: none” позволит фактически щёлкать по области ввода, даже если мы нажмём на иконку, фокус будет получен полем находящимся снизу.

   А сейчас, давайте напишем некоторые стили для полей ввода:

.form-1 input[type=text],
.form-1 input[type=password] {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
 
    /* Размер и положение */
    width: 100%;
    padding: 10px 18px 10px 45px;
 
    /* Стили */
    border: none; /* Убираем границы по умолчанию */
    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[type=text] {
    margin-bottom: 10px;
}

   Для того чтобы текст не сливался со значком, мы задали необходимые внутренние отступы. И задали полю type=text необходимый отступ сверху.

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

.form-1 input[type=text]:hover ~ i,
.form-1 input[type=password]:hover ~ i {
    color: #52cfeb;
}
 
.form-1 input[type=text]:focus ~ i,
.form-1 input[type=password]:focus ~ i {
    color: #42A2BC;
}
 
.form-1 input[type=text]:focus,
.form-1 input[type=password]:focus,
.form-1 button[type=submit]:focus {
    outline: none;
}

   Здесь мы видим две вещи: во - первых, это родственный селектор (~), для изменения цвета иконки при взаимодействии с текстовыми полями: светло – голубой для hover, тёмно – синий для focus. А так же, мы убираем внешние линии для Chrome.

   Последнее, что мы должны сделать, это кнопку «отправить». Эксперименты с z-index, не принесли желаемого результата, поэтому мне пришлось завернуть её в контейнер. Конечно, мы могли бы и без него обойтись, но тогда пришлось бы использовать некоторые CSS хаки и дополнительный раздражающий код.

.form-1 .submit {
    /* Размер и положение */
    width: 65px;
    height: 65px;
    position: absolute;
    top: 17px;
    right: -25px;
    padding: 10px;
    z-index: 2;
 
    /* Стили */
    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);
}

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

   Проблема: box-shadow подчёркивает эффект перекрытия, но вместе с  тем, он может и уничтожить его. Это мы можем увидеть, нажав на кнопку, и посмотреть на тень в рамке формы (расстояние между полями и правый отступ от формы).

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

.form-1 .submit:after {
    /* Размер и положение */
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: -2px;
    left: 30px;
 
    /* Стили */
    background: #ffffff;
     
    /* Другие маски обмана */
    box-shadow: 0 62px white, -32px 31px white;
}

   В конечно итоге, у нас получается 3 тени для нашего кольцевого элемента находящегося на пересечении пространства между полями ввода и формой.
   Давайте перенесёмся на самый верхний элемент кольца. С помощью свойств box-shadow, мы можем изменять и две другие маски. Это довольно трудно объяснить, поэтому я предлагаю вам открыть свой инструмент разработчика, в Chrome например, меню – инструменты – инструменты разработчика, и убрать галочку с .submit:after, чтобы увидеть что произойдёт.
   Последнее, но не менее важное, это фактические стили кнопки «отправить»:

.form-1 button {
    /* Размер и положение */
    width: 100%;
    height: 100%;
    margin-top: -1px;
 
    /* Стили иконок */
    font-size: 1.4em;
    line-height: 1.75;
    color: white;
 
    /* Стили */
    border: none; /* Убираем границу по умолчанию */
    border-radius: inherit;
    background: linear-gradient(#52cfeb, #42A2BC);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.3),
        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;
}

   И наконец стили событий hover и focus для нашей кнопки:

.form-1 button:hover,
.form-1 button[type=submit]: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);
}

   Всё довольно просто, мы использовали обычные цвета для состояний hover и focus. Но подождите, это ещё не всё! Поскольку по умолчанию для кнопки мы использовали градиент, а сейчас просто цвет, то браузер сначала отключает градиент, и только потом применяет цвет фона. Такое поведение, создаст очень здоровский эффект, если вы наводите курсор на кнопку, происходит как бы вспышка, смотрится оригинально. На этом, описание первого примера подошло к концу.

   Пример 2

   Это одна из самых лёгких форм, среди тех примеров что мы сегодня будем делать, и предоставляет она несколько новых функций: вход с помощью Twitter и кнопка «показать пароль», работающая с помощью jQuery toggle. Поэтому форма, будет содержать ещё и некоторый JavaScript.

   Разметка

<form class="form-2">
    <h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
    <p class="float">
        <label for="login"><i class="icon-user"></i>Username</label>
        <input type="text" name="login" placeholder="Username or email">
    </p>
    <p class="float">
        <label for="password"><i class="icon-lock"></i>Password</label>
        <input type="password" name="password" placeholder="Password" class="showpassword"> 
    </p>
    <p class="clearfix"> 
        <a href="#" class="log-twitter">Log in with Twitter</a>    
        <input type="submit" name="submit" value="Log in">
    </p>       
</form>

   В этом примере, мы будем использовать заголовок для формы. Я оформил его в виде тега H1, но вы можете сделать любым другим. Мы так же воспользуемся связанными с текстовыми полями метками label, в которых кроме текста, будут располагаться ещё и иконки.

   CSS

   Давайте начнём движение по стилям, начиная с общих:

.form-2 {
    /* Размер и положение */
    width: 340px;

    margin: 60px auto 30px;
    padding: 15px;
    position: relative;
 
    /* Стили */
    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); 
}

   Полупрозрачные границы мы будем создавать с помощью box-shadow.

   Задав общие стили, давайте не забудем и про стили заголовка. Для нашего варианта, хорошо подходят 3 стиля: текст жирный, буквы заглавные, общий цвет тёмно - серый;  текст жирный, буквы заглавные, общий цвет оранжевый; и наконец общий текст обычной жирности, буквы маленькие, цвет светло – серый. Для этого нам будут необходимы 2 span блока: 

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

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

   Наши обёртки - блоки установлены. Пришло время задать стили и для них! Итак, у нас есть метка label и поле ввода. Иконка будет располагаться внутри метки, вот стили:

.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; /* Разрыв между значком и текстом */
    display: inline-block;
    width: 10px;
}

   Примечание: использование курсора в виде руки cursor: pointer, поможет пользователям понять, что по метке можно нажать, чтобы начать ввод текста в выбранное поле. Это важно.

.form-2 input[type=text],
.form-2 input[type=password] {
    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;
}

   Не забудем и про состояния hover и focus:

.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover {
    border-color: #CCC;
}
 
.form-2 label:hover ~ input {
    border-color: #CCC;
}
 
.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
    border-color: #BBB;
    outline: none; /* Убираем внешние линии в Chrome */
}

   Смотрите, видите как  при наведении на метку,  для создания состояния hover на поле ввода, мы добираемся до дочерних элементов (~). Ну разве не впечатляюще?

   На очереди кнопка «отправить». Но подождите, поскольку оба блока с полями ввода приклеены в своём контейнере с помощью float, мы должны применить к ним clearfix. Помните как это сделать?

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
 
.form-2 input[type=submit],
.form-2 .log-twitter {
    /* Размер и положение */
    width: 49%;
    height: 38px;
    float: left;
    position: relative;
 
    /* Стили */
    box-shadow: inset 0 1px rgba(255,255,255,0.3);
    border-radius: 3px;
    cursor: pointer;
 
    /* Стили шрифта */
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 14px;
    line-height: 38px; /* Так же, как высота */
    text-align: center;
    font-weight: bold;
}
 
.form-2 input[type=submit] {
    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% ширины, чтобы между ними оставался небольшой отступ. Мы зададим им относительно позиционирование, причём это никак им не повредит.

.form-2 input[type=submit]: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[type=submit]:active,
.form-2 .log-twitter:active{
    top: 1px;
}

   Благодаря такому позиционированию, мы можем применить top: 1px для состояния active, и это будет выглядеть так, будто их толкнули вниз, когда мы наводим курсор.

   Важно: не все браузеры поддерживают box-shadow (такое чудо до сих пор имеет место), в этом случае, мы будет использовать простой цвет. Modernizr определит поддержку этого свойства, и применит к HTML, класс no-boxshadow, в случае если браузер не поддерживает тени. Это простой пример того, как можно создать простой «откат» для старых браузеров:

.no-boxshadow .form-2 input[type=submit]:hover {
    background: #ffb347;
}
 
.no-boxshadow .form-2 .log-twitter:hover {
    background: #2a8ac4;
}

   JavaScript

   Хм, а мы не забыли про возможность «показать пароль»? Давайте с этим разберёмся! Во-первых, как нам изменить атрибут type для поля ввода? Чтобы «показать пароль», мы будем использовать jQuery метод toggle, который будет заменять текущий type на другой, т.е. с type=”password” на type=”text” и наоборот.
   Я не очень хорошо работаю с jQuery, поэтому я нашёл небольшой фрагмент кода Aaron Saray, который нам с этим поможет. Давайте глянем:

$(function(){
    $(".showpassword").each(function(index,input) {
        var $input = $(input);
        $("<p class='opt'/>").append(
            $("<input type='checkbox' class='showpasswordcheckbox' id='showPassword' />").click(function() {
                var change = $(this).is(":checked") ? "text" : "password";
                var rep = $("<input placeholder='Password' type='" + change + "' />")
                    .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($("<label for='showPassword'/>").text("Show password")).insertAfter($input.parent());
    });
});

   Чем занимается данный скрипт?

Берёт все поля ввода с классом .showpassword
Создаёт новый контейнер (.opt)
Внутри него, создаёт поле ввода checkbox, со связанной с ним меткой.
Далее вставляет эти вещи после родительских полей ввода с классом .showpassword
И когда checkbox нажат, то он удаляет все элементы с классом .showpassword, и создаёт такой же вариант, только с другим атрибутом type.

   А сейчас, давайте создадим стили для нашего нового checkbox и метки.

.form-2 p:last-of-type {
    clear: both;    
}
 
.form-2 .opt {
    text-align: right;
    margin-right: 3px;
}
 
.form-2 label[for=showPassword] {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 400;
    text-transform: capitalize;
}
 
.form-2 input[type=checkbox] {
    vertical-align: middle;
    margin: -1px 5px 0 1px;
}

   Последнее, но не мало важное, нам нужно добавить ещё пару jQuery строк, чтобы изменить значок когда checkbox выбран. Достаточно простой, но эффективный способ.

$('#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. К сожалению, похоже он её удалил из Dribbble, поэтому оригинального кода я представить не могу. В любом случае, вы наверное поняли, что я хочу воссоздать это меню, и этот удивительный световой эффект на чистом CSS!

   Разметка

<form class="form-3">
    <p class="clearfix">
        <label for="login">Username</label>
        <input type="text" name="login" id="login" placeholder="Username">
    </p>
    <p class="clearfix">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" placeholder="Password"> 
    </p>
    <p class="clearfix">
        <input type="checkbox" name="remember" id="remember">
        <label for="remember">Remember me</label>
    </p>
    <p class="clearfix">
        <input type="submit" name="submit" value="Sign in">
    </p>       
</form>

   В этой форме, мы увидим нечто новенькое, например новую для нас опцию «Запомнить меня». Это весьма интересная вещь, ведь позволяет сохранить авторизационные данные, чтобы при следующем посещении, пользователю не пришлось вводить их заново.

   CSS

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

   Тень под формой будет выглядеть особенно, потому что её радиусу, мы зададим кое-какое отрицательное значение. На самом деле, мы можем даже сжать тень, если захотим.
   Давайте немного углубимся в структуру формы. Упаковкой для полей ввода, будет служить 2 тега p с относительным позиционированием, в нём же будут располагаться метки и сами поля. Это означает, что нам необходим класс сброса стилей clearfix для наших контейнеров (см. предыдущий пример).

   Давайте добавим стиль метки, полей ввода text/password, а так же стили состояний hover и focus:

.form-3 label {
    /* Размер и положение */
    width: 50%;
    float: left;
    padding-top: 9px;
 
    /* Стили*/
    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] {
    /* Размер и положение */
    width: 50%;
    float: left;
    padding: 8px 5px;
    margin-bottom: 10px;
    font-size: 12px;
 
    /* Стили */
    background: linear-gradient(#1f2124, #27292c);    
    border: 1px solid #000;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1);
    border-radius: 3px;
 
    /* Стили шрифтов */
    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; /* Убираем внешние линии в Chrome */
}

   Теперь, когда у нас есть некоторые красивые стили для полей ввода, давайте создадим их и для маленькой галочки «Запомнить меня», а так же кнопки отправить. Эти 2 блока, будут находиться бок о бок:

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

   Мы используем передовые CSS3 селекторы для задания стиля, но вы можете использовать обычные class если хотите (или, если нужно, для браузеров более старых версий). В любом случае, давайте начнём с checkbox и его метки:

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

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

   Настало время состояния hover для кнопки «отправить»:

.form-3 input[type=submit] {
    /* Ширина и положение */
    width: 100%;
    padding: 8px 5px;
   
    /* Стили */
    border: 1px solid #0273dd; /* Откат */
    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-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; /* Откат */
    border-color: rgba(0,0,0,0.9);
}
 
.no-boxshadow .form-3 input[type=submit]:hover {
    background: #2a92d8;
}

   И вот, уже почти конец, а обещанного светового эффекта всё нет…. где же он? Ладно, давайте сделаем это. Чтобы достичь этого, нам необходимы 3 элемента:

Один для градиентной линии в верхней части формы
Один в виде вспышки на следующей строке
Один для большого отражения в правой части формы

   Мы начнём с первых 2х, и псевдо элементов для тега form.

/* Линия градиента */
.form-3:after {
    /* Размер и положение */
    content: "";
    height: 1px;
    width: 33%;
    position: absolute;
    left: 20%;
    top: 0;
 
    /* Стили */
    background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}
 
/* Маленькая вспышка */
.form-3:before {
    /* Размер и положение */
    content: "";
    width: 8px;
    height: 5px;
    position: absolute;
    left: 34%;
    top: -7px;
     
    /* Стили*/
    border-radius: 50%;
    box-shadow: 0 0 6px 4px #fff;
}

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

.form-3 p:nth-child(1):before{
    /* Размер и положение */
    content: "";
    width: 250px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 45px;
 
    /* Стили */
    transform: rotate(75deg);
    background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    pointer-events: none;
}

   Важно: вы должны добавить необходимые свойства события pointer-events для клика мыши. Если этого не сделать, ни метки, не поля работать не будут, поскольку выше их располагается слой со вспышкой. Так же, для старых браузеров, которые не поддерживают необходимые свойства, нужно удалить отражения (мы добавим класс none-core с помощью Modernizr):

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

   Пример 4

   Особенностью данного примера, является отсутствие меток. И даже значков. Да, я помню, ранее я говорил что они необходимы, чтобы пользователь имел ясное представление что вводить в то или иное поле. Мы будем использовать placeholder HTML5 тег. Для браузеров не поддерживающих это свойство, мы будем создавать метки явно.

   Разметка

<form class="form-4">
    <h1>Login or Register</h1>
    <p>
        <label for="login">Username or email</label>
        <input type="text" name="login" placeholder="Username or email" required>
    </p>
    <p>
        <label for="password">Password</label>
        <input type="password" name='password' placeholder="Password" required> 
    </p>
 
    <p>
        <input type="submit" name="submit" value="Continue">
    </p>       
</form>

   Позвольте представить, атрибут required, необходимый для данного случая. Если браузер поддерживает его, то каждый раз происходит проверка поля ввода на пустоту, если всё верно, отправка данных становится возможной.

   Важно: введённые пользователем данные, конечно не плохо проверять  с помощью JavaScript, но и на стороне сервера вам так же необходим контроль, например PHP, ведь  JS можно просто отключить, и возможем взлом сайта и другие неприятности.

   CSS

   По традиции, давайте начнём с формы и заголовков, поскольку это просто.

.form-4 {
    /* Размер и положение */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative;
 
    /* Стили шрифта */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    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[type=text],
.form-4 input[type=password] {
    /* Размер и положение */
    width: 100%;
    padding: 8px 4px 8px 10px;
    margin-bottom: 15px;
 
    /* Стили */
    border: 1px solid #4e3043; /* Откат */
    border: 1px solid rgba(78,48,67, 0.8);
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
        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-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: #fff;
    font-size: 13px;
}

   Настало время заняться placeholder:

.form-4 input::-webkit-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
 
.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);
}

   А сейчас, займёмся состояниями hover и focus:

.form-4 input[type=text]:hover,
.form-4 input[type=password]:hover {
    border-color: #333;
}
 
.form-4 input[type=text]:focus,
.form-4 input[type=password]:focus,
.form-4 input[type=submit]: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;
}
 
/* Откат */
.no-boxshadow .form-4 input[type=text]:focus,
.no-boxshadow .form-4 input[type=password]:focus {
    outline: 1px solid white;
}

   А так же кнопкой отправки:

.form-4 input[type=submit] {
    /* Размер и положение */
    width: 100%;
    padding: 8px 5px;
     
    /* Стили */
    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;
 
    /* Стили шрифта */
    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[type=submit]:hover {
    box-shadow: 
        inset 0 1px rgba(255,255,255,0.2), 
        inset 0 20px 30px rgba(99,64,86,0.5);
}
 
/* Откат */
.no-boxshadow .form-4 input[type=submit]:hover {
    background: #594642;
}

   А теперь, давайте разберёмся с откатом  no-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;
}

   Всё просто, если placeholder не поддерживается, мы выведем метки. Вот и всё.

   Пример 5

   Этот пример довольно прост, он является заключительным на сегодня, и выполнен в стиле полупрозрачного стекла, с тонкими разделяющими линиями. Мы так же не будем использовать метки, и сделаем его компактным и минималистичным. Тест кнопки будет повёрнут на 90 градусов и при наведении курсора будет появляться стрелка.

   Разметка

<form class="form-5 clearfix">
    <p>
        <input type="text" id="login" name="login" placeholder="Username">
        <input type="password" name="password" id="password" placeholder="Password"> 
    </p>
    <button type="submit" name="submit">
        <i class="icon-arrow-right"></i>
        <span>Sign in</span>
    </button>     
</form>

   Минимум разметки, при минимальном размере) Оригинальность компактности.

   CSS

.form-5 {
    /* Размер и положение */
    width: 300px;
    margin: 60px auto 30px;
    position: relative;
 
    /* Стили */
    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[type=text],
.form-5 input[type=password] {
    /* Размер и положение */
    width: 100%;
    height: 50px;
    padding: 0 10px;
 
    /* Стили */
    border: none; /* Убираем границы по умолчанию */
    background: white; /* Откат */
    background: rgba(255,255,255,0.2);
    box-shadow: 
        inset 0 0 10px rgba(255,255,255,0.5);
 
    /* Стили шрифта */
    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[type=text] {
    border-bottom: 1px solid #fff; /* Откат */
    border-bottom: 1px solid rgba(255,255,255,0.7);
    border-radius: 5px 0 0 0;
}
 
.form-5 input[type=password] {
    border-top: 1px solid #CCC; /*Откат  */
    border-top: 1px solid rgba(0,0,0,0.1);
    border-radius: 0 0 0 5px;
}

   Давайте напишем стили для состояния hover и для placeholder:

.form-5 input[type=text]:hover,
.form-5 input[type=password]:hover,
.form-5 input[type=text]:focus,
.form-5 input[type=password]:focus {
    background: #f7def7; /* Откат */
    background: rgba(255,255,255,0.4);
    outline: none;
}
 
.form-5 input::-webkit-input-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: 'Handlee', cursive;
}
 
.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;
}

   На очереди кнопка «отправить». То немногое что я буду здесь делать, это создам «стрелку», но изначально скрою её, ведь по задумке, она появится только при наведении мыши. Обратите внимание, что мы будем использовать тег span внутри кнопки, чтобы заключить в него повернутый текст, не поворачивая саму кнопку.

.form-5 button {
    /* Размер и положение */
    width: 30%;
    height: 102px;
    float: left;
    position: relative;
    overflow: hidden;
 
    /* Стили */
    background: 
        url(/zhitelyam/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; /* Так же, как высота */
}
 
.form-5 button i {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -20px;
    font-size: 64px;
    line-height: 109px;
    color: #8d1645;
    opacity: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    transition: all 0.2s ease-out;
}
 
.form-5 button span {
    display: block;
 
    /*Стили шрифта*/
    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;
}

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

   Самое время добавить стили для состояний hover, focus и active. При наведении курсора, наш 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;
}
 
/* Щелчок по кнопке */
 
.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. Подробности на GitHub repo.

   После подключения всех необходимых файлов jQuery, просто вызовем его:

$(function(){
    $('input, textarea').placeholder();
});

   Это добавит поддержку placeholder для старых браузеров.

   И на последок  пару слов 

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

Виджет формы регистрации от Matt Anderson
Форма регистрации от Ashish Thakkar
Форма регистрации от Janko Jovanovic
Форма регистрации от Импрессионистов UI от DesignModo

   А вот кое-что для чтения на досуге:

Исчерпывающая информация о HTML5 формах от Wufoo
Демо-ролик от Chris Coyier о развитии дизайна форм и их функциональности
Статья Luke Wroblewski на Smashing Magazine о формах для мобильных устройств
Еще одна статья от Luke Wroblewski на Smashing Magazine о новых подходах к построению форм регистрации
Шторы льняные заказывайте: Заказать шторы . Часы Swiss Army. Купить.

   Спасибо за чтение этого руководства, и, как всегда, если у вас есть какие-либо вопросы, просто спросите, или если у вас есть соответствующие наработки, покажите нам, это просто сделать!

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


Дата публикации: 17.03.2013
Опубликовал: Сергей Кашурин
Просмотров: 920
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


BARAJA - jQuery плагин создающий великолепные информационные карточки на вашем сайте, экономя драгоценное место
Благодаря этому плагину, элементы могут располагаться как карты в виде стопки, раскладываясь перед нами оригинальным способом. Добавьте к элементам небольшой текст и уникальный рисунок, примените оригинальный эффект преобразования, и ваша страничка преобразится на глазах.
arcticModal - простые модальные окна jQuery
В поисках простого плагина для создания модальных окон, я перепробовал кучу вариантов, наткнувшись на arcticModal я остановился. Простота работы, вес самого плагина меня очень порадовали, поэтому поделюсь с вами я именно им, так как сам его проверял.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: