mærkerne en glat login form med css3,,,,,,,, lad os skabe en minimal og smarte login form ved hjælp af grundlæggende html5 så forbedre den med nogle css3 teknikker.tid til at omdanne nogle enkle elementer til noget smukt.,,,,,, indledning, web former er en integrerende del af et websted er design.uanset formålet er bestemt til at være en enkel måde for brugernes input - værdier og fremsende data.under html5 og css3, vi har til rådighed, giver os mulighed for at skabe former, der både er let at bruge og visuelt indbydende.,,,, design, mener jeg, at web - design skal være rene og effektive.den form, bestemt, at vi vil være koder følger de hovedforpligtede, herunder tre elementer: et brugernavn input, et kodeord input, og forelægge input.fordi avancen er så simpelt, det giver mulighed for mere fleksibilitet, når vi koden til html og css. her er nogle elementer i den udformning, som vi er nødt til at huske på, for kodning:,, stigninger, indre skygger, grænser til uklarhed, tekst skygger, indikation af en art tekst, de fleste elementer er css modetendenser, men vi vil undersøge det, indikation af en art, attribut, da det vil foreslå, at vores brugere, hvilke oplysninger de skal træde.,,,, trin 1: base html og css struktur, lad os starte med at skabe et rent html5 model med en formular og tre input:, <!DOCTYPE html> <html lang="en"> <head> \t<meta charset="utf-8"> \t<title>slick Login</title> \t<meta name="description" content="slick Login"> \t<meta name="author" content="Webdesigntuts+"> </head> <body> \t<form> \t\t<input type="text" name="username"> \t\t<input type="password" name="password"> \t\t<input type="submit" value="Log In"> \t</form> </body> \t </html>,Right now, we don’t have anything too special, just a form, three inputs and a blank document. lad os skabe en css filen, style.css, og forbinde dem med tilbage til vores hjemmeside: http: //, < forbindelse rel = "stylesheet" type = "tekst /css" href = "stil. css" />, husk, css fil befinder sig i vores vigtigste fortegnelse, sørg for at brug den rigtige vej, hvis du vælger at sætte din css fil i en mappe, såsom den mappe,'css,.,, før vi tilføje en af vores egen stil at css - sagen, er det altid en god praksis til at begynde på en frisk.vi starter vores stil med eric meyer er css nulstille, som fjerner default - og giver os mulighed for at opbygge vores regler fra samme punkt i en hvilken som helst browser. lad os begynde med at definere en skrifttype og baggrund gradient i vores indlogningsside.indsæt denne kode efter css nulstille: organ {skrifttype familie: uden serif; baggrund farve:Ńb55; baggrund billede: - webkit lineær gradient (bunden,Ńb55 0%,ƨf71 100%); baggrund billede: - moz lineær gradient (bunden,Ńb55 0%,ƨf71 100%); baggrund billede: - o-linear-gradient (bunden,Ńb55 0%,ƨf71 100%); baggrund billede: - ms lineær gradient (bunden,Ńb55 0%,ƨf71 100%); baggrund billede: lineær gradient (bunden,Ńb55 0%,ƨf71 100%);}, nu vi har tilføjet i det stykke kode, vores side bør nu have et sejt lineær gradient baggrund.gradienten starter nederst på side (0%), hvor den farve erŃb55 og ender på toppen af side (100%), hvor den farve erƨf71.bare for det tilfælde at den side er set fra en browser, som ikke støtter stigninger er det vigtigt at erklære, baggrund, farve,, som jeg i samme farve som den stigning på 0%.det gode ved css3 stigninger er, at du kan tilføje mange stopper, f.eks. en anden farve, ændre på 25%.den sidste ting at tilføje i kroppen, er den skrifttype, familie, besluttede jeg at bruge den uden serif type. nu, hvor vi har vores fundament, det er tid til at begynde at tilføje nogle flere på vej!,,,, trin 2: - login form, før vi begynder at css - for login form, er vi nødt til at tilføje nogle ting til vores html dokument.først begynde med at føje et, id, form, vi vil kalde det,'slick-login ".næste, tilføje en indikation af en art, attribut i hver af de input, hundetegn.her er hvordan html side bør så vidt:, <!DOCTYPE html> <html lang="en"> <head> \t<meta charset="utf-8"> \t<title>slick Login</title> \t<meta name="description" content="slick Login"> \t<meta name="author" content="Webdesigntuts+"> \t<link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> \t<form id="slick-login"> \t\t<input type="text" name="username" placeholder="[email protected]"> \t\t<input type="password" name="password" placeholder="password"> \t\t<input type="submit" value="Log In"> \t</form> </body> </html>,The HTML5 input placeholder attribute is a great addition to input tags. i stedet for at have en input - værdi, som brugeren har til at erstatte den, indikation af en art, der giver os mulighed for at vise tilskriver hjælpetekst og have det forsvinder, når brugeren begynder at type i marken.det er endnu ikke bred støtte, og bør derfor anvendes med forsigtighed.f.eks. siger den, indikation af en art, attribut ikke arbejde i en browser, vil brugeren ikke ved, hvilke værdier ind.senere vil vi dække en anden teknik, men det er også noget værd at indikation af en art tekst skal være et forslag, i stedet for at dømme input. nu, hvor vi har vores opdaterede html side, kan vi begynde at tilføje nogle på vej til login former.her er css for vores form, id, som vi erklærede før.,&#slick login (bredde: 220px. højde: 155px. position: absolut; venstre: 50%; top: 50% margen: - 110px; margen top. - 75px;}, for denne login form, besluttede jeg at det svarer helt (horisontalt og vertikalt) i midten af side.det er ganske ligetil at holdning elementer, som dette.som du kan se fra kode over position element 50% fra toppen og til venstre, og så bruge den margen, værdier, skubbe element halvdelen af bredde og højde.det er en god metode til at bringe elementer i midten af side, men det er ikke den store fleksibilitet.for eksempel, hvis du gerne vil gentage elementer, du bliver nødt til at ændre den bredde, højde og margen værdier for at holde element justeret.selv om jeg tilpasset form i midten af side, har det ret til at ændre den kode for, hvad du vil!nu, hvor vi har vores form på linje, det er tid til at gå over til modetendenser input.,,,, trin 3: - input, og nu får vi virkelig til det sjove.lad os begynde med at css for teksten og kodeord input:,&#slick login bidrag [type = "tekst"],&#slick login bidrag [type = "kodeord"] (bredde: 100%, højde: 40px; stillingtagen: relativ; margen top: 7px; skriftstørrelsen: 14px; farve:Ƽ udkast: ingen; grænse: 1px fast rgba (0, 0 0, 49); polstring til venstre: 20px; - webkit baggrund magasin: polstring kasse, - - baggrund magasin: polstring rubrik; baggrund magasin: polstring rubrik; grænseoverskridende radius: 6px; baggrund farve:&#fff; baggrund billede: - webkit lineær gradient (bunden,&#ffffff 0%,&#f2f2f2 100%); baggrund billede: - moz lineær gradient (bunden,&#ffffff 0%,&#f2f2f2 100%); baggrund billede: - o-linear-gradient (bunden,&#ffffff 0%,&#f2f2f2 100%); baggrund billede: - ms lineær gradient (bunden,&#ffffff 0%,&#f2f2f2 100%); baggrund billede: lineær gradient (bunden,&#ffffff 0%,&#f2f2f2 100%); - webkit rubrik skygge: indpresningsdybde 0px 2px 0px&#d9d9d9; rubrik skygge: indpresningsdybde 0px 2px 0px&#d9d9d9;}&#slick login bidrag [type = "tekst"]: fokus,&#slick login bidrag [type = "kodeord"]: vægt {- webkit rubrik skygge: indpresningsdybde 0px 2px 0px&#a7a7a7; rubrik skygge: indpresningsdybde 0px 2px 0px&#a7a7a7;}&#slick login input: for det første barn (margin top: 0px;}, husker du vores mål for at gøre det er fleksibel.i stedet for at erklære et fast bidrag bredde, besluttede jeg at gøre bredden i forhold til form er bredde.denne vej, hvis vi besluttede at ændre bredden af den form, alle de råmaterialer, ændres i overensstemmelse hermed. fordi vi erklæret, margen øverste værdi for alle input, vi er nødt til at tilføje en første barn, betjenings - og sørge for, at de, der oven i den første input er sat til nul.denne vej, den første inputværdien vil altid være anbragt på toppen af den form, en anden ting at huske på, at den redegørelse, ejendom til nogen, så de ikke tilføje noget uønsket browser skitserer vores input, gennemsigtige grænser at gøre form mere fleksible, vil vi tilføje en åben grænse, således at den baggrund har webstedet, form vil ændre sig til det.fordi, uklarhed, tilskriver ændringer opaciteten af hele element, jeg besluttede mig for at finde en metode til at ændre grænsen opacitet. hvis du erklærer grænsen farve i rgba, er det muligt at tilføje en alfa - værdi.som du kan se ovenfor, grænsen er et solidt 1px sorte grænse, men dens uklarhed er 47%. den polstring problem i vores design, teksten i området er flyttet til højre.for at opnå denne virkning på css, kan vi kun anvende, polstring til venstre, ejendom og sæt den til 20px.når vi gør den kode, der opstår et problem.polstringen værdi tilføjer 20 pixels til input bredde, og det er ikke, hvad vi ønsker, for at ordne det her, kan vi tilføje en baggrund magasin, ejendom og fastsætte værdien til polstring kasse.dette indlæg af css sikrer, at polstringen ikke påvirker bredden af input.du kan få mere at vide om, baggrund magasin, ejendom og mozilla., idet den indre skygge, et andet meget cool css3 ejendom, rubrik skygge.ved hjælp af indpresningsdybde parameter, giver os mulighed for at skabe et indre skygge på input element.ved hjælp af, fokus, komitéen, kan vi nemt skifte værdier og farver, når brugeren klik på banen.,,,, trin 4: - den forelægge knap, forelægge knap er en meget vigtig del af en form, så lad os gøre det stå ud!her er css, vi skal bruge for at indgive bidrag:,&#slick login bidrag [type = "stille"] (bredde: 100%, højde: 50px; margen top: 7px; farve:&#fff; skriftstørrelsen: 18px; skrifttype vægt: dristige; tekst skygge: 0px - 1px 0pxb6ddc; udkast: ingen; grænse: 1px fast rgba (0, 0 0, 49); - webkit baggrund magasin: polstring kasse, - - baggrund magasin: polstring rubrik; baggrund magasin: polstring rubrik; grænseoverskridende radius: 6px; baggrund farve:ᕚda; baggrund billede: - webkit lineær gradient (bunden,ᕚda 0%,̀ee4 100%); baggrund billede: - moz lineær gradient (bunden,ᕚda 0%,̀ee4 100%); baggrund billede: - o-linear-gradient (bunden,ᕚda 0%,̀ee4 100%); baggrund billede: - ms lineær gradient (bunden,ᕚda0%,̀ee4 100%); baggrund billede: lineær gradient (bunden,ᕚda 0%,̀ee4 100%); markør: point, - webkit rubrik skygge: indpresningsdybde 0px 1px 0px ab1ec; rubrik skygge: indpresningsdybde 0px 1px 0px ab1ec;}&#slick login bidrag [type = "forelægge": den {baggrund farve:f73e9; baggrund billede: - webkit lineær gradient (bunden,f73e9 0%,͛bef 100%); baggrund billede: - moz lineær gradient (bunden,f73e9 0%,͛bef 100%); baggrund billede: - o-linear-gradient (bunden,f73e9 0%,͛bef 100%); baggrund billede: - ms lineær gradient (bunden,f73e9 0%,͛bef 100%); baggrund billede: lineær gradient (bunden,f73e9 0%,͛bef 100%); - webkit rubrik skygge: indpresningsdybde 0px 1px 0px&#aab9f4; rubrik skygge: * * * 0px 1px 0px&#aab9f4;margen top: 10px;}&#slick login bidrag [type = "stille"]: aktive {baggrund farve:ᶤe1; baggrund billede: - webkit lineær gradient (bunden,ᶤe1 0%,ᰐdf 100%); baggrund billede: - moz lineær gradient (bunden,ᶤe1 0%,ᰐdf 100%); baggrund billede: - o-linear-gradient (bunden,ᶤe1 0%,ᰐdf 100%); baggrund billede: - ms lineær gradient (bunden,ᶤe1 0%,ᰐdf 100%); baggrund billede: lineær gradient (bunden,ᶤe1 0%,ᰐdf 100%); - webkit rubrik skygge: indpresningsdybde 0px 1px 0px]a9e9; rubrik skygge: indpresningsdybde 0px 1px 0px]a9e9;}, css for vores stille knap er ganske ligetil. vi bruger grænser, stigninger og indre skygger for at gøre den knap stå ud.en anden css3 ejendom, vi skal se på, er, at teksten skygge,. at gøre den knap tekst står lidt mere, vil vi tilføje en 1px fast skygge på toppen af teksten.ved hjælp af en mørkere farve (# 5b6ddc), kan vi gøre det hvide tekst mere fremtrædende mod blå baggrund.selv de mest subtile virkning at føje en tekst skygge kan tilføje meget til dit design, hjælper tekst står ud. jeg tog ud og tilføjede den kode for, svæv og aktive, udvælgere.alt, hvad der er forandret, er farven af gradient og den indre skygge.- farven er ret diskret, men det giver en masse til designet.jeg ændrede også værdien af margen top tre pixels lavere i den medlemsstat.ændringen er naturligt og tilføjer, at den elegance i form. så langt, det ser godt ud, men hvis du svæver over og klik på nogle elementer, det virker lidt højt.tid til at tilføje nogle tegnefilm!,,,,,,, løntrin 5: forøgelse af overgangen til elementer, for at gøre tingene flyde bedre, lad os tilføje lidt css - kode til vores input:, - webkit overgang. er let i, - - er at lette overgangen: alle. i; - o-transition: alle er let i ud.. - fru overgang. er let i; overgang. er let i, ved hjælp af en hurtig og enkel overgang, alle vores oplysninger ser ud og føles meget bedre.meddelelse overgangen af indre skygge farve på teksten input og forelægge knap informationskampagne om svævning overgangene gøre form ser fuldstændig., selv om det ser godt ud, lad os tilføje endnu en ting, før vi kan kalde det en dag,.,,,, trin 6: forøgelse af etiketter og sørge for, at vores formular er korrekt tilgængelige tilføj lidt, - - ved siden af din, input, mærker:, < etiket til = "brugernavn" > brugernavn < /etiketten > < etiket til = "kodeord" > password < /etiketten >, fordi vi ønsker at gøre vores form, så enkle som muligt, har vi besluttet at anvende, indikation af en art, attribut.en anden vej, som også kunne have arbejdet vil tilføje en, etiket, tag.for vi behøver ikke mærket i vores design, ret til adgang til og seo formål, vil vi tilføje dette css kode:,&#slick login etiket angive: ingen;}, fastsættelse af, display, ejendomsret, ingen får se, vi ønsker, som i dette tilfælde, er nr. se!,,,, trin 7: cross - forenelighed, lad os gå tilbage til det potentielle problem, vi har med, indikation af en art, attribut.hvis nogen er at se denne hjemmeside fra en browser, der ikke støtter, indikation af en art: vores tomme input ville være temmelig uhensigtsmæssigt.at ordne det, vi vil bruge jquery og modernizr til påvisning af støtte og rette op på situationer, hvor der ingen er.for at komme i gang, lad os forbinde dem til vores html side.,, læg manuskriptet hundetegn på < head > deres html.for de bedste resultater, skulle du have dem følge efter din stylesheet referencer.derfor anbefaler vi, at modernizr i hovedet, er dobbelt: på den html5 kniv (, der gør det muligt for html5 elementer i ie) skal udføre, før de < krop > - modernizr, < manuskript type = "tekst /javascript" src = "http: //kode. jquery. kom /jquery seneste. min.js" > < /manuskript > < manuskript src = "http: //www.modernizr. kom /downloads /modernizr seneste. er" > < /manuskript > nu, skabe en ny javascript filen, indikation af en art. er.enestående metode er en god måde at bruge modernizr at skabe et alternativ til det, indikation af en art, attribut.tilføje denne kode i javascript fil: $(function() (//kontrollere indikation af en art om støtte, hvis (!modernizr. input. indikation af en art) (//klar indikation af en art værdier $(dette). (» [indikation af en art] «). (function() (hvis ($(dette). val() = = ') //hvis felt er tomt {$(dette). val ($(dette). attr ('placeholder)))); //fokus og sløring af placeholders $([indikation af en art] «). fokus (function() (hvis ($(dette). val() = = $(det). attr ('placeholder')) ($(dette). val ('); $(denne). removeclass ('placeholder)}}). tåge (function() (hvis ($(dette). val() = = "
Computer læring 