Відмінна форма входу на html5 і css3

Відео: html css | пишемо просту і красиву форму входу. Flat desing

Відео: CSS з нуля: 12 - Створення форми реєстрації на сайті

Класна і в той же час проста форма входу на сайт. Адже як важливо мати красиву форму входу і реєстрації. Якщо вона дійсно підходить по стилю до вашого сайту, тоді сміливо забирайте і розміщуйте її у себе.

Реальний приклад можна побачити тут:

Подивитися прімерСкачать

Раніше я вже писав статті новин:

Перевірка заповнення форми на HTML5 + CSS3
Форма реєстрації та входу на CSS3 + HTML5
Перевірка заповнення форм на HTML5 + стилі

HTML частина

Структура форми стандартна - одне поле для введення логіна, друге поле для введення пароля:

1234567891011

lt;form id="Login"gt;lt;h1gt; Вхідlt;/h1gt;lt;fieldset id="Inputs"gt;lt;input id="Username" placeholder="Логін" autofocus="" required="" type="Text"gt;lt;input id="Password" placeholder="Пароль" required="" type="Password"gt;lt;/fieldsetgt;lt;fieldset id="Actions"gt;lt;input id="Submit" value="Увійти" type="Submit"gt;lt;a href=""gt; Забули пароль?lt;/agt; lt;a href=""gt; Реєстраціяlt;/agt;lt;/fieldsetgt;lt;/formgt;

CSS частина

Спочатку задамо стиль блоку в якому знаходиться вся форма:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657

#login{background-color: #fff-background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee))-background-image: -webkit-linear-gradient(top, #fff, #eee)-background-image: -moz-linear-gradient(top, #fff, #eee)-background-image: -ms-linear-gradient(top, #fff, #eee)-background-image: -o-linear-gradient(top, #fff, #eee)-background-image: linear-gradient(top, #fff, #eee)-height: 240px-width: 400px-margin: -150px 0 0 -230px-padding: 30px-position: absolute-top: 50%-left: 50%-z-index: 0--moz-border-radius: 3px--webkit-border-radius: 3px-border-radius: 3px--webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.2),0 1px 1px rgba(0, 0, 0, .2),0 3px 0 #fff,0 4px 0 rgba(0, 0, 0, .2),0 6px 0 #fff,0 7px 0 rgba(0, 0, 0, .2)--moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.2),1px 1px0 rgba(0,0,0, .1),3px 3px0 rgba(255, 255, 255, 1),4px 4px0 rgba(0,0,0, .1),6px 6px0 rgba(255, 255, 255, 1),7px 7px0 rgba(0,0,0, .1)-box-shadow:0 0 2px rgba(0, 0, 0, 0.2),0 1px 1px rgba(0, 0, 0, .2),0 3px 0 #fff,0 4px 0 rgba(0, 0, 0, .2),0 6px 0 #fff,0 7px 0 rgba(0, 0, 0, .2)-}#login: before{content: ``-position: absolute-z-index: -1-border: 1px dashed #ccc-top: 5px-bottom: 5px-left: 5px-right: 5px--moz-box-shadow: 0 0 0 1px #fff--webkit-box-shadow: 0 0 0 1px #fff-box-shadow: 0 0 0 1px #fff-}

Далі для слова «Вхід», яке знаходиться над полями форми:

Відео: # 1 Підготовка файлів і верстка форми в HTML + CSS

12345678910111213141516171819202122232425262728293031323334353637383940414243

h1{text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5)-text-transform: uppercase-text-align: center-color: # 666-margin: 0 0 30px 0-letter-spacing: 4px-font: normal 26px/1 Verdana, Helvetica-position: relative-}h1: after, h1: before{background-color: # 777-content: ""-height: 1px-position: absolute-top: 15px-width: 120px-}h1: after{background-image: -webkit-gradient(linear, left top, right top, from(# 777), to(#fff))-background-image: -webkit-linear-gradient(left, # 777, #fff)-background-image: -moz-linear-gradient(left, # 777, #fff)-background-image: -ms-linear-gradient(left, # 777, #fff)-background-image: -o-linear-gradient(left, # 777, #fff)-background-image: linear-gradient(left, # 777, #fff)-right: 0-}h1: before{background-image: -webkit-gradient(linear, right top, left top, from(# 777), to(#fff))-background-image: -webkit-linear-gradient(right, # 777, #fff)-background-image: -moz-linear-gradient(right, # 777, #fff)-background-image: -ms-linear-gradient(right, # 777, #fff)-background-image: -o-linear-gradient(right, # 777, #fff)-background-image: linear-gradient(right, # 777, #fff)-left: 0-}

Наступним кроком - стилі для полів введення логіна і пароля:

12345678910111213141516171819202122232425262728293031323334

#inputs input{background: # f1f1f1 url(images / login-sprite.jpg) no-repeat-padding: 15px 15px 15px 30px-margin: 0 0 10px 0-width: 353px- / * 353 + 2 + 45 = 400 * /border: 1px solid #ccc--moz-border-radius: 5px--webkit-border-radius: 5px-border-radius: 5px--moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff--webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff-}#username{background-position: 5px -2px !important-}#password{background-position: 5px -52px !important-}#inputs input: focus{background-color: #fff-border-color: # e8c291-outline: none--moz-box-shadow: 0 0 0 1px # e8c291 inset--webkit-box-shadow: 0 0 0 1px # e8c291 inset-box-shadow: 0 0 0 1px # e8c291 inset-}

І останнім кроком ми поставимо властивості для кнопки «Увійти» і посилань «Реєстрація» і «Забули пароль?»:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970

#actions{margin: 25px 0 0 0-}#submit{background-color: # ffb94b-background-image: -webkit-gradient(linear, left top, left bottom, from(# fddb6f), to(# ffb94b))-background-image: -webkit-linear-gradient(top, # fddb6f, # ffb94b)-background-image: -moz-linear-gradient(top, # fddb6f, # ffb94b)-background-image: -ms-linear-gradient(top, # fddb6f, # ffb94b)-background-image: -o-linear-gradient(top, # fddb6f, # ffb94b)-background-image: linear-gradient(top, # fddb6f, # ffb94b)--moz-border-radius: 3px--webkit-border-radius: 3px-border-radius: 3px-text-shadow: 0 1px 0 rgba(255,255,255,0.5)--moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset--webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset-border-width: 1px-border-style: solid-border-color: # d69e31 # e3a037 # d5982d # e3a037-float: left-height: 35px-padding: 0-width: 120px-cursor: pointer-font: bold 15px Arial, Helvetica-color: # 8f5a0a-}#submit: hover,#submit: focus{background-color: # fddb6f-background-image: -webkit-gradient(linear, left top, left bottom, from(# ffb94b), to(# fddb6f))-background-image: -webkit-linear-gradient(top, # ffb94b, # fddb6f)-background-image: -moz-linear-gradient(top, # ffb94b, # fddb6f)-background-image: -ms-linear-gradient(top, # ffb94b, # fddb6f)-background-image: -o-linear-gradient(top, # ffb94b, # fddb6f)-background-image: linear-gradient(top, # ffb94b, # fddb6f)-}#submit: active{outline: none--moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset--webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset-}#submit:: -moz-focus-inner{border: none-}#actions a{color: # 3151A2-float: right-line-height: 35px-margin-left: 10px-}