Форми входу для сайту - скрипти для сайтів
Кілька різних варіантів форм входу оформлених за допомогою CSS3. Зараз напевно жоден сайт не обходиться без системи реєстрації, так давайте зробимо красиву, креативну і сучасну форму входу.
Перш, ніж почати, кілька зауважень:
- В уроці будуть втрачені CSS префікси (-moz, -webkit і т.д.), але в исходниках вони звичайно ж будуть.
- Метою уроку є показ можливостей CSS. а саме CSS3. тому вид форм звичайно ж буде відрізнятися в IE8 і нижче. І кроки по адаптації ляжуть на ваші плечі - якщо ви плануєте підтримку старих браузерів.
- Ми не використали атрибут action тега форми, зосередилися тільки на дизайні.
- Особисто ми використовуємо box-model. де [width] = [ширина елемента] + [padding] + [border]. Активуємо цю модель в наступному сніпеті:
Кілька слів про юзабіліті форм.
Як було сказано раніше, ми спробували зробити кожну форму відмінну від іншої. У цій ми зробили акцент на круглій кнопці "Відправити".
Перший приклад досить мінімалістичний, ми не будемо використовувати лейбли, але звичайно ж користувачеві треба сказати, що він повинен писати в полях і для цього ми використовуємо іконки. Іконки зроблені фоном тега .
Ми не будемо тут розглядати, як використовувати іконки з шрифту FontAwesome, ви можете дізнатися про це тут.
У нас два контейнери з інпут і іконкою і ще один контейнер для відправки даних, в якій ми використовуємо тег button (замість input) з іконкою всередині. І також ми використовуємо атрибути placeholder для тих браузерів, які його підтримують. (Підтримку уточніть тут)
Почнемо зі стилів самого елемента form. Form це наша основна оболонка для наших демо, так само ми її центруємо, задавши ширину і використовуючи margin. Також задали відносне позиціонування, так як наші кнопки будуть позиціонуватися абсолютно.
Ми додали тонку лінію з правого боку іконки встановивши border-right і тінь - box-shadow. Також пограли з кольором: при: hover,: focus з плавним переходом. Додавши "pointer-events: none;" дозволить нам клікнувши по іконці сфокусувати увагу на поле input.
А тепер стилі для input полів:
Робимо відступи, щоб жодна ікона не перекривали поле input.
Перш ніж продовжити, вкажемо стилі для двох станів: hover і focus.
Тут ми використовуємо "братський" селектор (
) Для зміни кольору іконок, при взаємодії з полями input. світло блакитний при наведенні, темно-блакитний при фокусі. І видаляємо outline для Chrome.
Тепер повинні оформити кнопку submit.
Створюємо круглий елемент і поміщаємо його поверх нашої форми, злегка вийшовши за її межі з правого боку. Box-shadow підкреслять ефект перекриття.
Проблемка. тіні підкреслять ефект перекриття, але вони також можуть і повністю його зруйнувати. Ми побачимо тінь на рамці форми (відстань між полями input)
В принципі, ми можемо приховати ці тіні за допомогою різних масок з таким же фоном, як і у форми. Ця робота для псевдо-елменти!
Нам треба перекрити три ділянки у тіні. Дивіться на зображенні нижче:
І останнє - це наша submit button:
Досить просто: міняємо колір при наведенні і фокусі, але почекайте, це ще не все. Так як ми використовуємо градієнт в дефолтних стані і градієнт не може зробити плавний перехід в простий колір, то браузер спочатку відключає градієнт, а потім застосовує властивість background-color. Така поведінка викликає поява білої спалаху при наведенні курсору і виглядає це досить ефектно.
У цій формі у нас додаються нові опції: "Увійти через Twitter" і "Показати пароль", що потребують використання j # 097; vascript.
Тут ми будемо використовувати назву для форми. В даному прикладі взяли теги h1. але Ви можете використовувати будь-який. Також є label пов'язані з input.
Стилі для основного тега form. Використовуємо напівпрозорі кордони використовуючи box-shadow.
А тут розберемося з заголовками надавши їм свої кольори:
Далі ми будемо використовувати два параграфа, які будуть розміщені пліч-о-пліч. Кожен буде займати 50% від доступного простору в елементі form. і завдяки "border-box" box-sizing. відступи обчислюються всередині цих 50%. Ось тому ми можемо зробити відступи між цими двома елементами.
Оболонки налаштовані. Тепер стилізуємо елементи всередині них - label і input. Іконка знаходиться всередині label в даному прикладі:
Зауваження: використання cursor: pointer на label. допомагає користувачам зрозуміти, що вони можуть наажать на неї, щоб сфокусуватися на поле введення.
Не забуваємо і станах hover. focus
Використання "братнього" селектора (
) Дозволяє при наведенні на label або input зробити симпатичний ефект.
Так, а тепер кнопки submit. Але вони мають у нас властивість float. тому до контейнера, в якому вони знаходяться, застосуємо clearfix.
Обидві кнопки мають ширину 49% і лівий / правий відступи (margin) для створення невеликого зазору між ними.
Злегка додамо інший вид при наведенні і для активного стану кнопок:
Завдяки відносного позиціонування, ми можемо застосувати невеликий відступ зверху top: 1px до кнопок в їх активному стані.
Важливо. для браузерів, які не підтримують box-shadow. ми використовуємо проста зміна кольору фону background-color. Використовуваний нами Modernizr додає клас no-boxshadow в старих браузерах. Наочний приклад того, як можна створити "резервний" варіант оформлення в які не підтримують CSS3 браузерах.
І ми не забули про нашу маленьку фішку - "показати пароль". Ну по-перше, чи знаєте ви, що ми не можемо змінити тип атрибута у input -а? Для того, щоб зробити перемикач "показати пароль", ми повинні видалити фактично поле з паролем і створити текстове поле. Є маленький сниппет від Aaron Saray. який допоможе керувати цим всім. подивимося:
Так що ж все таки цей скриптик робить? Декілька речей:- Він зазначає кожен input з класом .showpassword
- Створює новий контейнер (.opt)
- Усередині цього контейнера він створює checkbox з label. який пов'язаний з ним.
- Він вставляє цей контейнер після батька поля input з класом .showpassword.
- Коли checkbox натиснуто, у поля input з класом .showpassword відбувається заміна атрибута на text.
Останнє, але не менш важливе. Додамо кілька jQuery рядків для зміни іконки в момент натискання на checkbox. Просто і ефективно:
А в даному прикладі по мимо звичних полів Логін і Пароль. додається опція - "Запам'ятати", а також світловий ефект, який зроблений виключно за допомогою CSS.
Тінь під формою буде виглядати по-особливому через використання негативного радіуса її поширення. Покопаємось трошки в структурі нашої форми. Для полів ми використовуємо два тега p, в яких знаходяться label і input. які в свою чергу мають властивості float. тому, як в попередньому прикладі не забуваємо застосувати clearfix для наших контейнерів.
Давайте додамо кілька стилів для label і полів input з атрибутами text / password. плюс стилі для їх станів: hover і focus.
Тепер у нас є симпатичні інпут поля, залишилося створити чекбокс - "Запам'ятати" і кнопку Submit. Ці два елементи знаходяться поряд один з одним:
Ми використовуємо нові CSS селектори, але ви можете використовувати і класи. У будь-якому випадку почнемо з чекбокса і лейбла:
Цей label буде досить сильно відрізнятися від використаних нами раніше лейблів. Ми повинні налаштувати кілька речей для правильного відображення: видаляємо раніше встановлені стилі, що стосується чекбокса, ми додамо невеликий відступ і зробимо вертикальне вирівнювання.
Але де ж наш світловий ефект? Щоб домогтися такого ефекту нам знадобляться три елементи:- Один для градієнтної лінії вгорі форми
- Один для невеликої спалаху для попередньої лінії
- Один для великого відображення вправо частини форми
І нарешті, наше відображення світла. Але почекайте, у нас недостатньо псевдо-елементів! Не хвилюйтеся, ми будемо використовувати наш перший параграф (тег p) для цього.
Важливо. ви повинні відключити події при натисканні на цьому елементі за допомогою властивості pointer-events. Якщо ми не зробимо цього, то не зможемо більше клікнути по полю input. так як там буде шар поверх їх. І для браузерів які не підтримують CSS3 (подія pointer-events) ми будемо змушені видалити відображення (додатковий клас створюється modernizr).
Особливістю цього прикладу є відсутність label. Або іконок. Так, ми раніше говорили, що label потрібно використовувати, щоб розповісти користувачам значення поля. Але робити ми це будемо з допомогою placeholder. А для Неподдерживается ці атрибути браузерів, зробимо видимими label.
Дозвольте представити новий атрибут - required. Якщо браузер підтримує це властивість, то воно дозволяє перевірити йому пусте поле чи ні і відповідно відправити дані форми.
Важливо. ви завжди повинні використовувати серверні перевірки форми, не покладайтеся на j # 097; vascript на стороні клієнта, який може бути і відключений.
Почнемо знову з тега form і заголовка форми:
Потім змінюємо стилі placeholder. де це можливо:
Стилі для двох станів hover і focus:
І кнопка відправки даних форми:
А тепер давайте розберемося з нашим запасним варіантом no-placeholder.
Все просто: якщо placeholder не підтримується, то label стають видимими.
І останній приклад оформлення форми виконаний під скло. Не будемо використовувати label. нехай все буде компактно. У кнопки відправки даних повернемо текст і при наведенні курсору миші, замість тексту у нас буде з'являтися стрілка.
Мінімалістичний структура для минималистичной форми.
Стиль всієї форми:
Далі стиль параграфа і input полів:
Стилі для hover стану і для placeholder:
І нарешті, кнопка Submit. Іконка стрілки буде видима тільки в момент наведення курсору миші. Зверніть увагу, що ми використовуємо SPAN усередині кнопки, щоб повернути текст без повороту іконки.
У разі, якщо браузер не підтримує властивість transform. текст просто не повертається. Нічого страшного.
Додали легку текстурки на кнопку, застосовуючи два background. текстура і радіальний градієнт, який лежить під нею.
Тепер додамо стилі для станів hover. focus і active. При наведенні, SPAN рухається вліво і зникає, і появлется стрілка:
Додамо трохи j # 097; vascript для додавання html5 placeholder в браузерах Неподдерживается його. Використовувати будемо плагін Mathias Bynens.
Після підключення jQuery і скрипта плагіна просто викликаємо його:
От і все. Тепер і ви самі зможете надати сучасний і стильний вигляд своїми формами.
А ідеї, як повинні виглядати форми, ви можете зачерпнути, скажімо на dribble. ось кілька:
СКАЧАТИ Стрибок: 2843
409,01 Kb Хто скачав?