Форма входа пользователей на JQuery + анимация! | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryФорма входа пользователей на JQuery + анимация!
Дата: 30.04.2013 в 22:18 | Просмотров: 2797

Форма входа пользователей на JQuery + анимация!

Форма входа пользователей на JQuery + анимация!
Скачатьбесплатно с сервера
Демодемонстрация

В одной из статей я говорил о том, что форма входа пользователей на сайт, должна иметь какую-то изюминку. Так вот, мы повернем тест кнопки отправки формы, и сделаем анимационный эффект при наведении курсора мыши на эту кнопку – появится стрелочка. В примере данной формы мы не будем использовать этикетки (label), и все будет выглядеть очень компактно. Еще один пример красивой формы в статье “Просто красивая форма входа CSS3″.

HMTL

Как Вы наверное уже догадались, начнем мы с разметки html:

Минимальная структура html для минимальной формы. :) (но тем не менее красивой)

CSS стилизация

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

Далее стили для параграфа p, в котором находятся наши поля input:

Теперь добавим некоторые “красивости”, а именно – состояние полей placeholder при наведении на них курсора мыши, и их активного состояния.

С полями ввода данных пока все. Перейдем к кнопке. Как уже говорилось выше, кнопка будет включать в себя стрелку, которая будет появляться при наведении на неё. Текст “Войти” будет соответственно повернут.

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

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

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

JavaScript

Давайте использовать немного JavaScript для корректной работы HTML5 placeholder в браузерах, которые не поддерживают его. Мы собираемся использовать JQuery плагин Mathias Bynens.
После подключения Jquery скрипта, мы просто вызываем его следующим образом:

И теперь placeholder behavior будет работать и в старых браузерах.

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


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net/codrops/2012/10/16/custom-login-form-styling/
Перевел: Владислав Бондаренко


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