Share
Låt oss skapa en minimal och smidig inloggningsformulär med grundläggande HTML5 och sedan förbättra den med några CSS3-tekniker. Tid att förvandla några enkla element till något vackert ...
Om du vill ha några vackra CSS3-formulär för din webbplats och inte vill skapa dem själv, kan du inte gå fel med CSS3 Form Pack på Envato Market. För bara $ 5 får du:
Inte undra på att det är en av de mest sålda CSS3-formulären på Envato Market.
CSS3 Form Pack på Envato Market Webbformulär är en integrerad del av en webbdesign. Oavsett syftet är blanketter avsedda att vara ett enkelt sätt för användarna att mata in värden och skicka in data. Med HTML5 och CSS3 till vårt förfogande kan vi skapa formulär som är både intuitiva att använda och visuellt tilltalande.
Jag tror att webbdesignen ska vara ren och effektiv. Formformen som vi ska koda följer de här principerna, inklusive bara tre element: ett användarnamn, ett lösenord och en inmatning. Eftersom markeringen är så enkel, tillåter det mer flexibilitet när vi kodar den i HTML och CSS.
Här är några element i designen som vi behöver tänka på för kodning:
De flesta elementen är CSS styling, men vi kommer kolla in platshållare attribut också, eftersom det kommer att föreslå våra användare vilken typ av data de ska ange.
Låt oss börja med att skapa en ren HTML5-mall med ett formulär och tre ingångar:
slick Login
Just nu har vi inte något för speciellt, bara en blankett, tre ingångar och ett tomt dokument. Låt oss skapa en CSS-fil som heter style.css och länka den tillbaka till vår HTML-sida:
Kom ihåg att CSS-filen finns för närvarande i vår huvudkatalog; se till att du använder rätt väg om du väljer att lägga din CSS-fil i en annan mapp, till exempel mappen 'Css'.
Innan vi lägger till någon av våra egna stylingar i CSS-filen är det alltid bra att börja med en ren skiffer. Vi börjar våra stilar med Eric Meyers CSS Reset som tar bort standard styling och låter oss bygga våra regler från samma punkt i vilken webbläsare som helst.
Låt oss börja med att definiera en typsnitt och bakgrundsgradient för vår inloggningssida. Sätt in den här koden efter CSS-återställningen:
kropp font-family: sans-serif; bakgrundsfärg: # 323B55; bakgrundsbild: -webkit-linjär-gradient (botten, # 323B55 0%, # 424F71 100%); bakgrundsbild: -moz-linjär-gradient (botten, # 323B55 0%, # 424F71 100%); bakgrundsbild: -o-linjär gradient (botten, # 323B55 0%, # 424F71 100%); bakgrundsbild: -ms-linjär-gradient (botten, # 323B55 0%, # 424F71 100%); bakgrundsbild: linjär gradient (botten, # 323B55 0%, # 424F71 100%);
Nu när vi har lagt till i det stycket kod ska vår sida nu ha en cool linjär gradientbakgrund. Graderingen börjar längst ner på sidan (0%) där färgen är # 323B55 och slutar högst upp på sidan (100%) där färgen är # 424F71. Bara incase sidan ses från en webbläsare som inte stöder gradienter, är det viktigt att deklarera en bakgrundsfärg, som jag satte i samma färg som gradienten vid 0%. Det fantastiska med CSS3-gradienter är att du kan lägga till många "stopp", till exempel en annan färgförändring på 25%. Den sista saken att lägga till i koden är typsnittsfamilj, Jag bestämde mig för att använda Sans Serif-typen.
Nu när vi har vår grund, är det dags att börja lägga till lite mer styling!
Innan vi börjar CSS-styling för inloggningsformuläret måste vi lägga till några saker i vårt HTML-dokument. Börja först med att lägga till en id till formuläret, vi kommer att kalla det 'Slick-login'. Lägg sedan till en platshållare attribut i var och en av inmatnings taggarna. Så här ser HTML-sidan ut så långt:
slick Login
HTML5-inmatningsplatshållarens attribut är ett utmärkt komplement till inmatnings taggar. Istället för att ha ett inmatningsvärde som användaren måste byta ut, ska platshållare attributet tillåter oss att visa hjälptext och få den att försvinna när användaren börjar skriva in fältet. Det är ännu inte allmänt stödjande och bör därför användas med försiktighet. Säg, till exempel, platshållare Attributet fungerar inte i en webbläsare, användaren vet inte vilka värden som ska ange. Senare kommer vi att täcka en fallback-teknik, men det är också värt ingenting att platshållarteksten borde vara ett förslag, snarare än att märka inmatningen.
Nu när vi har vår uppdaterade HTML-sida kan vi börja lägga till en styling till inloggningsformulären. Här är CSS för vår form id som vi förklarade förut.
# slick-login width: 220px; höjd: 155px; position: absolut; vänster: 50%; topp: 50%; marginal-vänster: -110px; marginal-topp: -75px;
För denna inloggningsformulär bestämde jag mig för att anpassa den perfekt (horisontellt och vertikalt) mitt på sidan. Det är ganska rakt framåt att placera element så här. Som du kan se från koden ovan, placera elementet 50% från toppen och vänster, och använd sedan marginalvärdena genom att trycka tillbaka elementets hälften av bredden och höjden. Det här är en utmärkt metod för att anpassa elementen i mitten av sidan, men det är inte så bra när det gäller flexibilitet. Om du till exempel vill duplicera element måste du ändra bredden, höjden och marginalvärdena för att hålla elementet inriktat. Även om jag justerade formuläret mitt på sidan, var god och ändra koden till vad du vill!
Nu när vi har vår form anpassad, är det dags att gå vidare till att utforma ingångarna!
Nu kommer vi verkligen till de roliga grejerna. Lets börja med att lägga till CSS för text och lösenord ingångar:
# slick-login inmatning [typ = "text"], # slick-login inmatning [typ = "lösenord"] bredd: 100%; höjd: 40px; positon: relativ; marginal-topp: 7px; typsnittstorlek: 14px; färg: # 444; kontur: ingen; gränsen: 1px solid rgba (0, 0, 0, .49); stoppning-vänster: 20px; -webkit-bakgrundsblock: vadderingsbox -moz-background-clip: padding-box; bakgrundsblock: vadderar-box; gränsstråle: 6px; bakgrundsfärg: #fff; bakgrundsbild: -webkit-linjär-gradient (botten, #FFFFFF 0%, # F2F2F2 100%); bakgrundsbild: -moz-linjär-gradient (botten, #FFFFFF 0%, # F2F2F2 100%); bakgrundsbild: -o-linjär-gradient (botten, #FFFFFF 0%, # F2F2F2 100%); bakgrundsbild: -ms-linjär-gradient (botten, #FFFFFF 0%, # F2F2F2 100%); bakgrundsbild: linjär gradient (botten, #FFFFFF 0%, # F2F2F2 100%); -webkit-box-skugga: inset 0px 2px 0px # d9d9d9; boxskugga: inset 0px 2px 0px # d9d9d9; # slick login-inmatning [typ = "text"]: fokus, # slick-login-inmatning [typ = "lösenord"]: fokus -webkit-box-skugga: inset 0px 2px 0px # a7a7a7; boxskugga: inset 0px 2px 0px # a7a7a7; # slick-login-inmatning: första barnet margin-top: 0px;
Kom ihåg, vårt mål är att göra formuläret flexibelt. I stället för att förklara en fast inmatningsbredd bestämde jag mig för att göra bredden relativt formens bredd. På så sätt, om vi bestämde oss för att ändra bredden på formuläret ändras alla ingångar i enlighet därmed.
Eftersom vi förklarade a margin-top värde för alla ingångar, måste vi lägga till en förstfödde väljaren och se till att margin-top av den första ingången är inställd på noll. På detta sätt kommer det första inmatningsvärdet alltid att placeras längst upp i formuläret.
En annan sak att tänka på är att ställa in översikt egendom till ingen, så att webbläsaren inte lägger till några oönskade konturer till våra ingångar.
För att göra formuläret mer flexibelt kommer vi att lägga till en transparent gräns, så att vilken bakgrund webbplatsen har, kommer formuläret att ändras för att passa det. Eftersom det opacitet attributet ändrar opaciteten av hela elementet, bestämde jag mig för att söka efter en metod för att bara ändra gränsen opacity.
Om du anger gränsvärdet i rgba, är det möjligt att lägga till ett alfavärde. Som du kan se ovan, är vår gräns en solid 1px svart gräns, men dess opacitet är 47%.
I vår design flyttas texten i fältet till höger. För att uppnå denna effekt i CSS kan vi helt enkelt använda padding-vänster egendom och ställa in den till 20px. När vi gör koden uppstår ett problem. Padding-värdet lägger till 20 pixlar till inmatningsbredden, vilket inte är vad vi vill.
För att åtgärda detta kan vi lägga till en background-clip egendom och ange värdet på vadderingsboxen. Denna kod av CSS ser till att polstret inte påverkar bredden på ingången. Du kan lära dig mer om background-clip egendom på Mozilla.
En annan mycket cool CSS3-egenskap är box-shadow. Med hjälp av inmatningsparametern kan vi skapa en inre skugga på ingångselementet. Använda fokus väljare kan vi enkelt ändra värden och färgerna när användaren klickar på fältet.
Skicka knappen är en väldigt viktig del av en blankett, så låt oss få det att stå ut! Här är CSS som vi ska använda för inlämningsinsatsen:
# slick-login input [typ = "submit"] bredd: 100%; höjd: 50px; marginal-topp: 7px; färg: #fff; typsnittstorlek: 18px; font-weight: bold; textskugga: 0px -1px 0px # 5b6ddc; kontur: ingen; gränsen: 1px solid rgba (0, 0, 0, .49); -webkit-bakgrundsblock: vadderingsbox -moz-background-clip: padding-box; bakgrundsblock: vadderar-box; gränsstråle: 6px; bakgrundsfärg: # 5466da; bakgrundsbild: -webkit-linjär-gradient (botten, # 5466da 0%, # 768ee4 100%); bakgrundsbild: -moz-linjär-gradient (botten, # 5466da 0%, # 768ee4 100%); bakgrundsbild: -o-linjär-gradient (botten, # 5466da 0%, # 768ee4 100%); bakgrundsbild: -ms-linjär-gradient (botten, # 5466da 0%, # 768ee4 100%); bakgrundsbild: linjär gradient (botten, # 5466da 0%, # 768ee4 100%); markör: pekare; -webkit-box-skugga: inset 0px 1px 0px # 9ab1ec; boxskugga: inset 0px 1px 0px # 9ab1ec; # slick-login input [typ = "submit"]: svävar bakgrundsfärg: # 5f73e9; bakgrundsbild: -webkit-linjär-gradient (botten, # 5f73e9 0%, # 859bef 100%); bakgrundsbild: -moz-linjär-gradient (botten, # 5f73e9 0%, # 859bef 100%); bakgrundsbild: -o-linjär gradient (botten, # 5f73e9 0%, # 859bef 100%); bakgrundsbild: -ms-linjär-gradient (botten, # 5f73e9 0%, # 859bef 100%); bakgrundsbild: linjär gradient (botten, # 5f73e9 0%, # 859bef 100%); -webkit-box-skugga: inset 0px 1px 0px # aab9f4; boxskugga: inset 0px 1px 0px # aab9f4; marginal-topp: 10px; # slick-login input [typ = "submit"]: aktiv bakgrundsfärg: # 7588e1; bakgrundsbild: -webkit-linjär-gradient (botten, # 7588e1 0%, # 7184df 100%); bakgrundsbild: -moz-linjär-gradient (botten, # 7588e1 0%, # 7184df 100%); bakgrundsbild: -o-linjär-gradient (botten, # 7588e1 0%, # 7184df 100%); bakgrundsbild: -ms-linjär-gradient (botten, # 7588e1 0%, # 7184df 100%); bakgrundsbild: linjär gradient (botten, # 7588e1 0%, # 7184df 100%); -webkit-box-skugga: inset 0px 1px 0px # 93a9e9; boxskugga: inset 0px 1px 0px # 93a9e9;
CSS för vår inlämningsknapp är ganska rakt framåt; Vi använder gränser, gradienter och inre skuggor för att få knappen att sticka ut. En annan CSS3-egenskap som vi ska titta på är text-shadow.
För att knapptexten ska sticka lite mer lägger vi till en 1px solid skugga ovanpå texten. Med en mörkare färg (# 5b6ddc) kan vi göra den vita texten mer framträdande mot den ljusblå bakgrunden. Även den mest subtila effekten som att lägga till en textskugga kan lägga mycket på din design, vilket hjälper texten att sticka ut.
Jag gick vidare och lade till koden för sväva och aktiva selektorer. Allt som ändras är färgen på gradienten och den inre skuggan. Lägg märke till hur färgförändringen är ganska subtil, men den lägger mycket till designen. Jag har också ändrat värdet på margin-top till tre pixlar lägre på svängtillståndet. Förändringen känns naturlig och lägger till formens elegans.
Hittills ser allt bra ut, men om du svävar över och klickar på några element verkar det lite haltigt. Tiden att lägga till lite animering!
För att få saker att flöda mycket bättre, låt oss lägga till denna bit av CSS-kod till våra ingångar:
-webkit-övergång: alla .1s enkelt-i-ut; -moz-övergång: allt .1s lätt-i-ut; -överskridande: alla .1s enkelt-i-ut; -ms-övergång: alla .1s enkelt-i-ut; övergång: alla .1s lätt in-ut;
Med en snabb och enkel övergång ser alla våra element ut och känns mycket bättre. Lägg märke till övergången av inre skuggfärg på textingångarna och inmatningsknappen animering på svävaren; Övergångarna gör formulärets utseende komplett.
Även om allt ser bra ut, låt oss lägga till några mer godsaker innan vi kallar det en dag.
För att försäkra oss om att vår blankett är korrekt tillgänglig, lägg till den här delen av markeringen bredvid din inmatning tags:
Eftersom vi vill göra vår form så enkel som möjligt bestämde vi oss för att använda platshållare attribut. Ett annat sätt som också kunde ha fungerat skulle lägga till i en märka märka. Eftersom vi inte behöver taggen i vår design, snarare för tillgänglighet och SEO, lägger vi till den här CSS-koden i:
# slick-login-etikett display: none;
Ställa in visa egendom till ingen uppnår det utseende vi vill ha, vilket i det här fallet inte ser alls ut!
Låt oss nu gå tillbaka till det potentiella problemet vi skulle ha med platshållare attribut. Säg att någon tittar på den här webbplatsen från en webbläsare som inte stöder platshållare: våra tomma inmatningar skulle vara ganska ohjälpliga. För att fixa detta kommer vi att använda jQuery och Modernizr för att upptäcka stöd och rätta till situationer där det inte finns någon. För att komma igång, låt oss länka skripten till vår HTML-sida.
Släpp skriptkoderna i
av din HTML. För bästa prestanda bör du följa dem efter dina referensblankettreferenser. Anledningen till att vi rekommenderar att du placerar Modernizr i huvudet är dubbelt: HTML5 Shiv (som möjliggör HTML5-element i IE) måste köras innan - Modernizr
Skapa nu en ny javascriptfil som heter placeholder.js. Unik metod har ett bra sätt att använda Modernizr för att skapa en återgång för platshållare attribut. Lägg till den här koden i javascriptfilen:
Accentsconagua
$ (funktion () // check platshållare webbläsare stöd om (! Modernizr.input.placeholder) // ställa in hållare värden $ (this) .find ('[placeholder]'). (detta) .val () == ") // Om fältet är tomt $ (detta) .val ($ (this) .attr ('placeholder'));; // fokus och suddighet av platsinnehavare $ ("[placeholder]") .fokus (funktion () om ($ (detta) .val () == $ (detta) .attr ('placeholder')) $ (detta) .val (detta) .removeClass ('placeholder');). Blur (funktion () om ($ (detta) .val () == "|| $ (detta) .val () == $ .attr ('placeholder')) $ (detta) .val ($ (this) .attr ('placeholder')); $ (detta) .addClass ('placeholder');) // avlägsna platsinnehavare Skicka ($ this) .find ('[placeholder]'). val () == $ (detta) .attr ('placeholder')) $ (detta) .val (");));); Vi länkar även javascript-filen till vår HTML-sida:
För att göra detta arbete måste vi lägga till en platshållare klass till fältingångarna:
Nu, låt oss lägga till styling för platshållare klass i vår CSS-fil:
.platshållare färg: # 444;
Medan vi är på det, låt oss också lägga till ett användbart kod av CSS som säkerställer att bredden på ingångarna blir desamma, oavsett vaddering och gränser:
* -moz-box-size: border-box; -webkit-box-dimensionering: border-box; box-dimensionering: gränsvärde;
För mer information om varför box-dimensionering är så bra, Paul irländare har en bra förklaring.
Att göra vår form ännu mer fancy, vi lägger till en enkel stigande animering i formuläret när sidan laddas. Låt oss börja med att deklarera animeringen och lägga till nyckelbilder:
@keyframes "login" 0% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; filter: alfa (opacitet = 0); opacitet: 0; marginal-topp: -50px; 100% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"; filter: alfa (opacitet = 100); opacitet: 1; marginal-topp: -75px; @ -moz-keyframes login 0% filter: alfa (opacitet = 0); opacitet: 0; marginal-topp: -50px; 100% filter: alfa (opacitet = 100); opacitet: 1; marginal-topp: -75px; @ -webkit-keyframes "login" 0% filter: alfa (opacitet = 0); opacitet: 0; marginal-topp: -50px; 100% filter: alfa (opacitet = 100); opacitet: 1; marginal-topp: -75px; @ -ms-keyframes "login" 0% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; filter: alfa (opacitet = 0); opacitet: 0; marginal-topp: -50px; 100% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"; filter: alfa (opacitet = 100); opacitet: 1; marginal-topp: -75px; @ -o-keyframes "login" 0% filter: alfa (opacitet = 0); opacitet: 0; marginal-topp: -50px; 100% filter: alfa (opacitet = 100); opacitet: 1; marginal-topp: -75px;
CSS ovan förklarar en ny animering som heter logga in och ändrar margin-top och opacitet värden så att formen dyker in och stiger in i position. Nu lägger vi till i CSS för slick-login id:
-Webkit-animering: Logga in 1s enkelt in-ut; -moz-animering: Logga in 1s enkelt-i-ut; -ms-animering: Logga in 1s enkelt-i-ut; -o-animation: Logga in 1s enkelt-i-ut; animering: inloggning 1s easy-in-out;
Nu, varje gång sidan laddas, körs en sekunds animering. Nu när vi har stylat, fixat och animerat, är vi färdiga!
Här är en titt på den slutliga HTML-filen för detta smarta inloggningsformulär:
Slick Login
Och CSS:
/ * CSS RESET http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licens: ingen (offentlig domän) * / html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, före, a, abbr, akronym, stora, citera, kod, del, DFN, em, img, ins, kbd, q, s, samp, liten, slag, stark, sub, sup, tt, var, b, u, i, centrera, dl, dt, dd, ol, ul, li, fieldset, bilda, etikett, legend, bord, bildtext, tbody, tfoot, thead, tr, th, td, artikel, åt sidan, duk, detaljer, bädda in, figur, figcaption, sidfot, sidhuvud, hgroup, meny, nav, utgång, rubin, avsnitt, sammanfattning, tid, markera, ljud, video margin: 0; vaddering: 0; gräns: 0; typsnittstorlek: 100%; typsnitt: ärv; vertikaljustering: baslinje; / * HTML5 display-rollåterställning för äldre webbläsare * / artikel, åtgärd, detaljer, figcaption, figur, footer, header, hgroup, meny, nav, avsnitt display: block; kropp linjehöjd: 1; ol, ul listestil: none; blockquote, q quotes: none; blockquote: före, blockquote: after, q: before, q: efter content: "; content: none; table border collapse: collapse; border spacing: 0; / * CSS animeringar * / @keyframes" logga in "0% -ms-filter:" progid: DXImageTransform.Microsoft.Alpha (Opacity = 0) "; filter: alfa (opacitet = 0); opacitet: 0; margin-top: -50px; 100% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"; filter: alfa (opacitet = 100); opacitet: 1; margin-top: -75px; @ -moz-keyframes inloggning 0 % filter: alfa (opacitet = 0); opacitet: 0; margin-top: -50px; 100% filter: alfa (opacitet = 100); opacitet: 1; marginal-topp: -75px; webkit-keyframes "login" 0% filter: alfa (opacitet = 0); opacitet: 0; margin-top: -50px; 100% filter: alfa (opacitet = 100); opacitet: 1; marginal : -75px; @ -ms-keyframes "logga in" 0% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; filter: alfa (opacitet = 0); opacitet: 0 ; margin-top: -50px; 100% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"; filter: alfa (opacitet = 100); opacitet: 1; marginal-topp: -75px; @ -o-keyframes "login" 0% filter: alfa (opacitet = 0); opacitet: 0; marginal-topp: -50px; 100% filter: alfa (opacitet = 100); opacitet: 1; marginal-topp: -75px; / * Huvud CSS * / * -moz-box-size: border-box; -webkit-box-dimensionering: border-box; box-dimensionering: gränsvärde; kropp font-family: sans-serif; bakgrundsfärg: # 323B55; bakgrundsbild: -webkit-linjär-gradient (botten, # 323B55 0%, # 424F71 100%); bakgrundsbild: -moz-linjär-gradient (botten, # 323B55 0%, # 424F71 100%); bakgrundsbild: -o-linjär gradient (botten, # 323B55 0%, # 424F71 100%); bakgrundsbild: -ms-linjär-gradient (botten, # 323B55 0%, # 424F71 100%); bakgrundsbild: linjär gradient (botten, # 323B55 0%, # 424F71 100%); # slick-login bredd: 220px; höjd: 155px; position: absolut; vänster: 50%; topp: 50%; marginal-vänster: -110px; marginal-topp: -75px; -webkit-animering: Logga in 1s enkelt-i-ut; -moz-animering: Logga in 1s enkelt-i-ut; -ms-animering: Logga in 1s enkelt-i-ut; -o-animation: Logga in 1s enkelt-i-ut; animering: inloggning 1s easy-in-out; # slick-login-etikett display: none; .placeholder color: # 444; # slick-login input [typ = "text"], # slick-login inmatning [typ = "lösenord"] bredd: 100%; höjd: 40px; positon: relativ; marginal-topp: 7px; typsnittstorlek: 14px; färg: # 444; kontur: ingen; gränsen: 1px solid rgba (0, 0, 0, .49); stoppning-vänster: 20px; -webkit-bakgrundsblock: vadderingsbox -moz-background-clip: padding-box; bakgrundsblock: vadderar-box; gränsstråle: 6px; bakgrundsbild: -webkit-linjär-gradient (botten, #FFFFFF 0%, # F2F2F2 100%); bakgrundsbild: -moz-linjär-gradient (botten, #FFFFFF 0%, # F2F2F2 100%); bakgrundsbild: -o-linjär-gradient (botten, #FFFFFF 0%, # F2F2F2 100%); bakgrundsbild: -ms-linjär-gradient (botten, #FFFFFF 0%, # F2F2F2 100%); bakgrundsbild: linjär gradient (botten, #FFFFFF 0%, # F2F2F2 100%); -webkit-box-skugga: inset 0px 2px 0px # d9d9d9; boxskugga: inset 0px 2px 0px # d9d9d9; -webkit-övergång: alla .1s enkelt in-ut; -moz-övergång: allt .1s lätt-i-ut; -överskridande: alla .1s enkelt-i-ut; -ms-övergång: alla .1s enkelt-i-ut; övergång: alla .1s lätt in-ut; # slick login-inmatning [typ = "text"]: fokus, # slick-login-inmatning [typ = "lösenord"]: fokus -webkit-box-skugga: inset 0px 2px 0px # a7a7a7; boxskugga: inset 0px 2px 0px # a7a7a7; # slick-login-inmatning: första barnet margin-top: 0px; # slick-login input [typ = "submit"] bredd: 100%; höjd: 50px; marginal-topp: 7px; färg: #fff; typsnittstorlek: 18px; font-weight: bold; textskugga: 0px -1px 0px # 5b6ddc; kontur: ingen; gränsen: 1px solid rgba (0, 0, 0, .49); -webkit-bakgrundsblock: vadderingsbox -moz-background-clip: padding-box; bakgrundsblock: vadderar-box; gränsstråle: 6px; bakgrundsfärg: # 5466da; bakgrundsbild: -webkit-linjär-gradient (botten, # 5466da 0%, # 768ee4 100%); bakgrundsbild: -moz-linjär-gradient (botten, # 5466da 0%, # 768ee4 100%); bakgrundsbild: -o-linjär-gradient (botten, # 5466da 0%, # 768ee4 100%); bakgrundsbild: -ms-linjär-gradient (botten, # 5466da 0%, # 768ee4 100%); bakgrundsbild: linjär gradient (botten, # 5466da 0%, # 768ee4 100%); -webkit-box-skugga: inset 0px 1px 0px # 9ab1ec; boxskugga: inset 0px 1px 0px # 9ab1ec; markör: pekare; -webkit-övergång: alla .1s enkelt in-ut; -moz-övergång: allt .1s lätt-i-ut; -överskridande: alla .1s enkelt-i-ut; -ms-övergång: alla .1s enkelt-i-ut; övergång: alla .1s lätt in-ut; # slick-login input [typ = "submit"]: svävar bakgrundsfärg: # 5f73e9; bakgrundsbild: -webkit-linjär-gradient (botten, # 5f73e9 0%, # 859bef 100%); bakgrundsbild: -moz-linjär-gradient (botten, # 5f73e9 0%, # 859bef 100%); bakgrundsbild: -o-linjär gradient (botten, # 5f73e9 0%, # 859bef 100%); bakgrundsbild: -ms-linjär-gradient (botten, # 5f73e9 0%, # 859bef 100%); bakgrundsbild: linjär gradient (botten, # 5f73e9 0%, # 859bef 100%); -webkit-box-skugga: inset 0px 1px 0px # aab9f4; boxskugga: inset 0px 1px 0px # aab9f4; marginal-topp: 10px; # slick-login input [typ = "submit"]: aktiv bakgrundsfärg: # 7588e1; bakgrundsbild: -webkit-linjär-gradient (botten, # 7588e1 0%, # 7184df 100%); bakgrundsbild: -moz-linjär-gradient (botten, # 7588e1 0%, # 7184df 100%); bakgrundsbild: -o-linjär-gradient (botten, # 7588e1 0%, # 7184df 100%); bakgrundsbild: -ms-linjär-gradient (botten, # 7588e1 0%, # 7184df 100%); bakgrundsbild: linjär gradient (botten, # 7588e1 0%, # 7184df 100%); -webkit-box-skugga: inset 0px 1px 0px # 93a9e9; boxskugga: inset 0px 1px 0px # 93a9e9;
Här är en glimt på slutresultatet:
Det fantastiska med den här formen är att det är väldigt enkelt att byta. Det är också väldigt lätt att förlänga, lägga till fler inmatningar, validering, funktionalitet etc. Tack för att du läst och jag hoppas du lärde dig något. Jag är intresserad av att höra vad du använder det här för!
