Share
Să creăm un formular de autentificare minimal și subțire folosind HTML5 de bază, apoi să îl îmbunătățim cu câteva tehnici CSS3. E timpul să transformăm niște elemente simple în ceva frumos ...
Dacă doriți niște formulare CSS3 frumoase pentru site-ul dvs. și nu doriți să le creați singur, nu puteți merge prost cu CSS3 Form Pack pe Envato Market. Pentru doar 5 dolari, primiți:
Nu e de mirare că este unul dintre cele mai bine vândute elemente de formular CSS3 de pe Envato Market.
CSS3 Form Pack pe piața Envato Formularele web fac parte integrantă din designul unui site web. Oricare ar fi scopul, formele sunt destinate să fie o modalitate simplă pentru utilizatori de a introduce valori și de a transmite date. Având la dispoziție HTML5 și CSS3, ne permite să creăm formulare care să fie atât intuitive cât și atractive.
Cred că designul web ar trebui să fie curat și eficient. Formularul de formular pe care urmează să îl codificăm urmează acele principii, inclusiv doar trei elemente: o intrare de nume de utilizator, o intrare de parolă și o intrare de trimitere. Deoarece marcajul este atât de simplu, permite mai multă flexibilitate atunci când îl codificăm în HTML și CSS.
Iată câteva elemente în proiectare pe care va trebui să le păstrăm în minte pentru codificare:
Cele mai multe elemente sunt stilul CSS, dar vom verifica înlocuitor atribut, de asemenea, deoarece acest lucru va sugera utilizatorilor noștri ce fel de date ar trebui să intre.
Să începem prin crearea unui șablon curat HTML5 cu un formular și trei intrări:
slick Login
În momentul de față, nu avem nimic prea special, doar un formular, trei intrări și un document gol. Să creăm un fișier CSS numit style.css și conectați-o înapoi la pagina HTML:
Amintiți-vă că fișierul CSS este situat în prezent în directorul nostru principal; asigurați-vă că utilizați calea corectă dacă alegeți să puneți fișierul CSS într-un alt folder, cum ar fi folderul 'Css'.
Înainte de a adăuga orice stil propriu în fișierul CSS, este întotdeauna o practică bună să porniți de la o artă curată. Vom începe stilurile noastre cu resetarea CSS a lui Eric Meyer, care elimină stilul implicit și ne permite să construim regulile noastre din același punct în orice browser.
Să începem cu definirea unui gradient de fonturi și de fundal pentru pagina noastră de conectare. Introduceți acest cod după resetarea CSS:
corp font-family: sans-serif; fundal-culoare: # 323B55; fundal-imagine: -webkit-gradient linear (fund, # 323B55 0%, # 424F71 100%); fundal-imagine: -moz-linear-gradient (fund, # 323B55 0%, # 424F71 100%); fundal-imagine: -o-linear-gradient (fund, # 323B55 0%, # 424F71 100%); fundal-imagine: -ms-linear-gradient (fund, # 323B55 0%, # 424F71 100%); fundal-imagine: gradient linear (fund, # 323B55 0%, # 424F71 100%);
Acum, pe care l-am adăugat în acea bucată de cod, pagina noastră ar trebui să aibă acum un fundal gradient liniar. Gradientul începe în partea de jos a paginii (0%) unde culoarea este # 323B55 și se termină în partea de sus a paginii (100%) unde culoarea este # 424F71. Doar incaseaza pagina este privita dintr-un browser care nu suporta gradienti, este important de a declara a culoare de fundal, pe care am setat la aceeași culoare ca și gradientul la 0%. Lucrul deosebit pentru gradientele CSS3 este că puteți adăuga multe opriri, de exemplu o altă schimbare a culorii la 25%. Ultimul lucru pe care îl adăugați în eticheta corporală este familie de fonturi, Am decis să folosesc tipul Sans Serif.
Acum că avem temelia noastră, este timpul să începem să adăugăm ceva mai mult stil!
Înainte de a începe stilul CSS pentru formularul de autentificare, trebuie să adăugăm câteva lucruri în documentul nostru HTML. În primul rând, începe cu adăugarea unui id la forma, o vom numi 'Slick-conectare'. Apoi, adăugați o înlocuitor atribut în fiecare dintre etichetele de intrare. Iată cum ar trebui să pară pagina HTML:
slick Login
Atributul de substituent al intrării HTML5 este o adăugare extraordinară pentru etichetele de intrare. În loc să aibă o valoare de intrare pe care utilizatorul trebuie să o înlocuiască, înlocuitor atributul ne permite să afișăm textul de ajutor și să îl dispare odată ce utilizatorul începe să scrie în câmp. Nu este încă susținută pe scară largă și, prin urmare, trebuie utilizată cu prudență. Spune, de exemplu, înlocuitor atributul nu funcționează într-un browser, utilizatorul nu va ști ce valori să introduceți. Mai târziu, vom acoperi o tehnică de rezervă, însă nu merită nimic ca textul cu substituent să fie o sugestie, mai degrabă decât să eticheteze intrarea.
Acum, dacă avem pagina noastră HTML actualizată, putem începe să adăugăm un stil pentru formularele de conectare. Aici este CSS pentru formularul nostru id pe care am spus-o mai devreme.
# slick-login lățime: 220px; înălțime: 155px; poziția: absolută; stânga: 50%; top: 50%; margin-stânga: -110px; margin-top: -75px;
Pentru acest formular de autentificare, am decis să o aliniez perfect (orizontal și vertical) în centrul paginii. Este destul de drept să poziționăm elemente ca acesta. După cum puteți vedea din codul de mai sus, poziționați elementul de 50% din partea superioară și din stânga și apoi folosind valorile marginilor, împingeți înapoi jumătate din lățimea și înălțimea elementului. Aceasta este o metodă excelentă de aliniere a elementelor în centrul paginii, dar nu este atât de mare în ceea ce privește flexibilitatea. De exemplu, dacă doriți să duplicați elementele, va trebui să modificați valorile de lățime, înălțime și margine pentru a menține elementul aliniat. Chiar dacă am aliniat formularul în centrul paginii, nu ezitați să schimbați codul la ceea ce vă place!
Acum, că avem forma aliniată, este timpul să trecem la stilul intrărilor!
Acum ajungem cu adevărat la lucrurile distractive. Să începem prin adăugarea codului CSS pentru intrările de text și parolă:
# intrare slick-login [type = "text"], intrare # slick-login [type = "password"] width: 100%; înălțime: 40px; poziton: relativă; margin-top: 7px; font-size: 14px; culoare: # 444; contur: nici unul; graniță: 1px solid rgba (0, 0, 0, .49); padding-left: 20px; -webkit-background-clip: căptușeală; -moz-fundal-clip: căptușeală; fundal-clip: padding-box; raza de graniță: 6px; fundal-culoare: #fff; fundal-imagine: -webkit-gradient linear (fund, #FFFFFF 0%, # F2F2F2 100%); fundal-imagine: -moz-linear-gradient (fund, #FFFFFF 0%, # F2F2F2 100%); fundal-imagine: -o-linear-gradient (fund, #FFFFFF 0%, # F2F2F2 100%); fundal-imagine: -ms-linear-gradient (fund, #FFFFFF 0%, # F2F2F2 100%); fundal-imagine: gradient linear (fund, #FFFFFF 0%, # F2F2F2 100%); -webkit-box-shadow: inserție 0px 2px 0px # d9d9d9; box-shadow: inserție 0px 2px 0px # d9d9d9; intrare slick-login [type = "text"]: focalizare, intrare # slick-login [type = "password"]: focus -webkit-box-shadow: insert 0px 2px 0px # a7a7a7; box-shadow: inserție 0px 2px 0px # a7a7a7; # intrare slick-login: primul-copil margin-top: 0px;
Amintiți-vă, scopul nostru este de a face forma flexibilă. În loc de a declara o lățime de intrare fixă, am decis să fac lățimea relativă la lățimea formei. În acest fel, dacă am decis să modificăm lățimea formularului, toate intrările se vor schimba în consecință.
Pentru că am declarat a margin-top pentru toate intrările, trebuie să adăugăm o primul copil selector și asigurați-vă că margin-top din prima intrare este setată la zero. În acest fel, prima valoare de intrare va fi întotdeauna poziționată în partea de sus a formularului.
Un alt lucru de ținut minte este stabilirea contur proprietate pentru nici unul, astfel încât browser-ul nu adaugă contururi nedorite la intrările noastre.
Pentru a face forma mai flexibilă, vom adăuga o graniță transparentă, astfel încât, indiferent de fundalul pe care îl are site-ul web, formularul se va schimba pentru a se potrivi. Deoarece opacitate atributul modifică opacitatea întregului element, am decis să caut o metodă pentru a schimba doar opacitatea frontierei.
Dacă declarați culoarea de margine în rgba, este posibil să adăugați o valoare alfa. După cum puteți vedea mai sus, granița noastră este o frontieră solidă de 1px negru, dar opacitatea acesteia este de 47%.
În designul nostru, textul din câmp este deplasat spre dreapta. Pentru a obține acest efect în CSS, putem folosi pur și simplu -Padding la stânga proprietate și setați-l la 20px. Când facem codul, apare o problemă. Valoarea de umplutură adaugă 20 de pixeli la lățimea de intrare, ceea ce nu este ceea ce ne-ar plăcea.
Pentru a rezolva acest lucru, putem adăuga a fundal clip proprietate și setați valoarea la caseta de umplere. Acest fragment de CSS asigură faptul că umplutura nu afectează lățimea intrării. Puteți afla mai multe despre fundal clip proprietate la Mozilla.
O altă proprietate foarte interesantă pentru CSS3 este box-shadow. Folosind parametrul inset ne permite să creăm o umbră interioară pe elementul de intrare. Utilizarea concentra selectorul, putem schimba cu ușurință valorile și culorile în jurul valorii de când utilizatorul face clic pe câmp.
Butonul de prezentare este o parte foarte importantă a unui formular, așa că haideți să ne lămurim! Aici este CSS pe care o vom folosi pentru trimiterea intrării:
# intrare slick-login [type = "trimite"] lățime: 100%; înălțime: 50px; margin-top: 7px; culoare: #fff; font-size: 18px; font-weight: bold; text-shadow: 0px -1px 0px # 5b6ddc; contur: nici unul; graniță: 1px solid rgba (0, 0, 0, .49); -webkit-background-clip: căptușeală; -moz-fundal-clip: căptușeală; fundal-clip: padding-box; raza de graniță: 6px; fundal-culoare: # 5466da; fundal-imagine: -webkit-gradient linear (fund, # 5466da 0%, # 768ee4 100%); fundal-imagine: -moz-linear-gradient (fund, # 5466da 0%, # 768ee4 100%); fundal-imagine: -o-linear-gradient (fund, # 5466da 0%, # 768ee4 100%); fundal-imagine: -ms-linear-gradient (fund, # 5466da 0%, # 768ee4 100%); fundal-imagine: gradient linear (fund, # 5466da 0%, # 768ee4 100%); cursor: pointer; -webkit-box-shadow: insetul 0px 1px 0px # 9ab1ec; box-shadow: inset 0px 1px 0px # 9ab1ec; # intrare slick-login [type = "trimite"]: hover background-color: # 5f73e9; fundal-imagine: -webkit-gradient linear (fund, # 5f73e9 0%, # 859bef 100%); fundal-imagine: -moz-linear-gradient (fund, # 5f73e9 0%, # 859bef 100%); fundal-imagine: -o-gradient linear (fund, # 5f73e9 0%, # 859bef 100%); fundal-imagine: -ms-linear-gradient (fund, # 5f73e9 0%, # 859bef 100%); fundal-imagine: gradient liniar (fund, # 5f73e9 0%, # 859bef 100%); -webkit-box-shadow: inserție 0px 1px 0px # aab9f4; box-shadow: inserție 0px 1px 0px # aab9f4; margin-top: 10px; # intrare slick-login [type = "trimite"]: activ background-color: # 7588e1; fundal-imagine: -webkit-gradient linear (fund, # 7588e1 0%, # 7184df 100%); fundal-imagine: -moz-linear-gradient (fund, # 7588e1 0%, # 7184df 100%); fundal-imagine: -o-linear-gradient (fund, # 7588e1 0%, # 7184df 100%); fundal-imagine: -ms-linear-gradient (fund, # 7588e1 0%, # 7184df 100%); fundal-imagine: gradient linear (fund, # 7588e1 0%, # 7184df 100%); -webkit-box-shadow: inserție 0px 1px 0px # 93a9e9; box-shadow: inset 0px 1px 0px # 93a9e9;
CSS pentru butonul nostru de trimitere este destul de drept înainte; folosim granițe, gradienți și umbre interioare pentru a face butonul să iasă în evidență. O altă proprietate CSS3 pe care o vom uita este text-shadow.
Pentru a face ca textul butonului să iasă în evidență un pic mai mult, vom adăuga o umbră solidă de 1px pe partea de sus a textului. Folosind o culoare mai închisă (# 5b6ddc), putem face ca textul alb să fie mai proeminent față de fundalul albastru deschis. Chiar și efectul cel mai subtil, cum ar fi adăugarea unei umbre de text, poate adăuga o mulțime de design, ajutând textul să iasă în evidență.
M-am dus și am adăugat codul pentru planare și activ selectoare. Tot ce este schimbat este culoarea gradientului și a umbrei interioare. Observați cum schimbarea culorii este destul de subtilă, dar adaugă mult designului. Am schimbat, de asemenea, valoarea margin-top la trei pixeli mai mici în starea de hover. Schimbarea este naturală și adaugă eleganța formei.
Până acum, totul arată grozav, dar dacă treceți peste și faceți clic pe anumite elemente, pare puțin cam încurcat. Este timpul să adăugați animație!
Pentru a face lucrurile să curgă mult mai bine, să adăugăm acest bit de cod CSS la intrările noastre:
-webkit-transition: all .1s easy-in-out; -moz-tranziție: toate .1s easy-out-out; -o-tranziție: toate .1s ușor-în-out; -ms-tranziție: toate .1s ușurință-out-out; tranziție: toate .1s ușurință în afară;
Folosind o tranziție rapidă și simplă, toate elementele noastre arată și se simt mult mai bine. Observați că tranziția culorii umbrelor interioare pe intrările de text și animația butonului de expediere pe hover; tranzițiile fac ca forma să arate complet.
Deși totul arată bine, să adăugăm mai multe bunuri înainte de ao numi o zi.
Pentru a vă asigura că formularul nostru este în mod corespunzător accesibil, adăugați acest bit de marcare lângă dvs. intrare Etichete:
Pentru că vrem să facem forma cât mai simplă, am decis să folosim înlocuitor atribut. Un alt mod în care ar fi putut fi lucrat ar fi adăugarea unui a eticheta etichetă. Pentru că nu avem nevoie de etichetă în designul nostru, mai degrabă pentru scopuri de accesibilitate și SEO, vom adăuga acest cod CSS în:
# etichetă slick-login display: none;
Setarea afişa proprietatea nimănui nu atinge aspectul pe care îl dorim, ceea ce, în acest caz, nu este deloc privit!
Acum, să ne întoarcem la problema potențială pe care o vom avea cu înlocuitor atribut. Spune că cineva văd acest site dintr-un browser care nu acceptă înlocuitor: intrările necompletate ar fi destul de nefolositoare. Pentru a rezolva acest lucru, vom folosi jQuery și Modernizr pentru a detecta suportul și pentru a rectifica situațiile în care acesta nu există. Pentru a începe, să conectăm scripturile la pagina noastră HTML.
Aruncați etichetele de script în
din HTML. Pentru cea mai bună performanță, trebuie să le urmați după referințele foilor de stil. Motivul pentru care recomandăm plasarea Modernizr în cap este de două ori: HTML Shiv (care permite elemente HTML5 în IE) trebuie să execute înainte de - Modernizr
Acum, creați un nou fișier javascript numit placeholder.js. Metoda unică are o modalitate excelentă de a utiliza Modernizr pentru a crea o rezervă pentru înlocuitor atribut. Adăugați acest cod în fișierul javascript:
Accentsconagua
$ (functie () // verificati suportul browserului placeholder daca (! Modernizr.input.placeholder) // setati placeholder values $ (this) .find ('[placeholder]') (this) .val () == ") // dacă câmpul este gol $ (this) .val ($ (this) .attr ('placeholder'));); () () () () () () () () () () () (aceasta) .removeClass ('placeholder');) blur (function () if ($ (this) .val () .attr ('placeholder')) $ (this) .val ($ (this) .attr ('placeholder')); $ (this) .addClass ('placeholder'); trimiteți (funcția () $ (this) .find ('[placeholder]') (funcția () if ($ (this). val () == $ (acest) .attr ("substituent")) $ (this) .val ();));); De asemenea, vom lega fișierul javascript în pagina HTML:
Pentru a face acest lucru, trebuie să adăugăm o înlocuitor clasă la intrările câmpului:
Acum, să adăugăm stilul pentru înlocuitor clasă în fișierul nostru CSS:
.înlocuitor culoare: # 444;
În timp ce ne aflăm, adăugăm și un fragment de ajutor CSS care va asigura că șuruburile intrărilor rămân neschimbate, indiferent de umplutură și margini:
* -moz-box-size: box-border; -webkit-box-size: caseta de frontieră; box-size: caseta de margine;
Pentru mai multe informații de ce box-dimensionare este atât de mare, Paul Irish are o mare explicație.
Pentru a face forma noastră chiar mai mult fantezie, vom adăuga o animație simplă în creștere la formular când pagina se încarcă. Să începem cu declararea animației și adăugarea cadrelor cheie:
@frame-cheie "login" 0% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; filtru: alfa (opacitate = 0); opacitate: 0; margin-top: -50px; 100% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacitate = 100)"; filtru: alfa (opacitate = 100); opacitate: 1; margin-top: -75px; @ -moz-cheie-cheie de conectare 0% filter: alpha (opacity = 0); opacitate: 0; margin-top: -50px; 100% filtru: alfa (opacitate = 100); opacitate: 1; margin-top: -75px; @ -webkit-keyframes "login" 0% filtru: alfa (opacitate = 0); opacitate: 0; margin-top: -50px; 100% filtru: alfa (opacitate = 100); opacitate: 1; margin-top: -75px; @ -ms-cheie-cheie "login" 0% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; filtru: alfa (opacitate = 0); opacitate: 0; margin-top: -50px; 100% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacitate = 100)"; filtru: alfa (opacitate = 100); opacitate: 1; margin-top: -75px; @ -o-keyframes "login" 0% filtru: alfa (opacitate = 0); opacitate: 0; margin-top: -50px; 100% filtru: alfa (opacitate = 100); opacitate: 1; margin-top: -75px;
CSS de mai sus declară o nouă animație numită Logare și modifică margin-top și opacitate astfel încât forma să se estompeze și să se ridice în poziție. Acum, să adăugăm în CSS pentru slick-conectare id:
-webkit-animație: login 1s easy-in-out; -moz-animație: conectați 1s ușurință în sus; -ms-animație: conectare 1s ușurință în sus; -o-animație: conectați 1s ușurință-în-out; animație: conectați-1s easy-in-out;
Acum, de fiecare dată când se încarcă pagina, va fi executată cea de-a doua animație. Acum, că avem stil, fix și animat, am terminat!
Iată o privire la codul HTML final pentru acest formular de autentificare:
Slick Login
Și CSS:
/ * CSS RESET http://meyerweb.com/eric/tools/css/reset/ v2.0 20110126 Licență: none (domeniu public) * / html, corp, div, span, applet, obiect, iframe, h1, h2, h4, mare, citează, cod, del, DFN, em, img, ins, kbd, q, s, SAMP, mici, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, li, FIELDSET, forma, etichetă, legenda, tabel, legendă, TBODY, TFOOT, dinlicitația, tr, th, TD, articol, o parte, panza, detalii, Încorporați, figura, figcaption, subsol, antet, hgroup, meniu, nav, ieșire, rubin, secțiune, rezumat, timp, marcă, audio, video margine: 0; umplutura: 0; frontieră: 0; font-size: 100%; font: inherit; aliniere verticală: linia de bază; / * Resetarea rolului afișării HTML5 pentru browserele mai vechi * / articol, deoparte, detalii, figcaption, figura, subsol, antet, hgroup, meniu, nav, secțiune display: block; corp linie-înălțime: 1; ol, ul stil-list: nici unul; blockquote, q citate: none; blockquote: înainte, blockquote: după, q: înainte, q: după content: "; login "0% -ms-filter:" progid: DXImageTransform.Microsoft.Alpha (Opacity = 0) "; filtru: alfa (opacitate = 0); opacitate: -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacitate = 100)"; filtru: alfa (opacitate = 100); opacitate: 1; margin-top: -75px; % filtru: alfa (opacitate = 0); opacitate: 0; marginea superioară: -50px; 100% filtru: alfa (opacitate = 100) webkit-keyframes "login" 0% filtru: alfa (opacitate = 0); opacitate: 0; marginea superioară: -50px; 100% filtru: opacitate: 1; : -75px; @ -ms-keyframes "login" 0% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; ; margin-top: -50px; 100% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacitate = 100)"; filtru: alfa (opacitate = 100); opacitate: 1; margin-top: -75px; @ -o-keyframes "login" 0% filtru: alfa (opacitate = 0); opacitate: 0; margin-top: -50px; 100% filtru: alfa (opacitate = 100); opacitate: 1; margin-top: -75px; / * CSS principal * / * -moz-box-size: box-border; -webkit-box-size: caseta de frontieră; box-size: caseta de margine; corp font-family: sans-serif; fundal-culoare: # 323B55; fundal-imagine: -webkit-gradient linear (fund, # 323B55 0%, # 424F71 100%); fundal-imagine: -moz-linear-gradient (fund, # 323B55 0%, # 424F71 100%); fundal-imagine: -o-linear-gradient (fund, # 323B55 0%, # 424F71 100%); fundal-imagine: -ms-linear-gradient (fund, # 323B55 0%, # 424F71 100%); fundal-imagine: gradient linear (fund, # 323B55 0%, # 424F71 100%); # slick-login lățime: 220px; înălțime: 155px; poziția: absolută; stânga: 50%; top: 50%; margin-stânga: -110px; margin-top: -75px; -webkit-animație: login 1s easy-in-out; -moz-animație: conectați 1s ușurință în sus; -ms-animație: conectare 1s ușurință în sus; -o-animație: conectați 1s ușurință-în-out; animație: conectați-1s easy-in-out; # etichetă slick-login display: none; .locatorul culoare: # 444; intrare # slick-login [type = "text"], intrare # slick-login [type = "password"] width: 100%; înălțime: 40px; poziton: relativă; margin-top: 7px; font-size: 14px; culoare: # 444; contur: nici unul; graniță: 1px solid rgba (0, 0, 0, .49); padding-left: 20px; -webkit-background-clip: căptușeală; -moz-fundal-clip: căptușeală; fundal-clip: padding-box; raza de graniță: 6px; fundal-imagine: -webkit-gradient linear (fund, #FFFFFF 0%, # F2F2F2 100%); fundal-imagine: -moz-linear-gradient (fund, #FFFFFF 0%, # F2F2F2 100%); fundal-imagine: -o-linear-gradient (fund, #FFFFFF 0%, # F2F2F2 100%); fundal-imagine: -ms-linear-gradient (fund, #FFFFFF 0%, # F2F2F2 100%); fundal-imagine: gradient linear (fund, #FFFFFF 0%, # F2F2F2 100%); -webkit-box-shadow: inserție 0px 2px 0px # d9d9d9; box-shadow: inserție 0px 2px 0px # d9d9d9; -webkit-transition: all .1s ease-out-out; -moz-tranziție: toate .1s easy-out-out; -o-tranziție: toate .1s ușor-în-out; -ms-tranziție: toate .1s ușurință-out-out; tranziție: toate .1s ușurință în afară; intrare slick-login [type = "text"]: focalizare, intrare # slick-login [type = "password"]: focus -webkit-box-shadow: insert 0px 2px 0px # a7a7a7; box-shadow: inserție 0px 2px 0px # a7a7a7; # intrare slick-login: primul-copil margin-top: 0px; # intrare slick-login [type = "trimite"] lățime: 100%; înălțime: 50px; margin-top: 7px; culoare: #fff; font-size: 18px; font-weight: bold; text-shadow: 0px -1px 0px # 5b6ddc; contur: nici unul; graniță: 1px solid rgba (0, 0, 0, .49); -webkit-background-clip: căptușeală; -moz-fundal-clip: căptușeală; fundal-clip: padding-box; raza de graniță: 6px; fundal-culoare: # 5466da; fundal-imagine: -webkit-gradient linear (fund, # 5466da 0%, # 768ee4 100%); fundal-imagine: -moz-linear-gradient (fund, # 5466da 0%, # 768ee4 100%); fundal-imagine: -o-linear-gradient (fund, # 5466da 0%, # 768ee4 100%); fundal-imagine: -ms-linear-gradient (fund, # 5466da 0%, # 768ee4 100%); fundal-imagine: gradient linear (fund, # 5466da 0%, # 768ee4 100%); -webkit-box-shadow: insetul 0px 1px 0px # 9ab1ec; box-shadow: inset 0px 1px 0px # 9ab1ec; cursor: pointer; -webkit-transition: all .1s ease-out-out; -moz-tranziție: toate .1s easy-out-out; -o-tranziție: toate .1s ușor-în-out; -ms-tranziție: toate .1s ușurință-out-out; tranziție: toate .1s ușurință în afară; # intrare slick-login [type = "trimite"]: hover background-color: # 5f73e9; fundal-imagine: -webkit-gradient linear (fund, # 5f73e9 0%, # 859bef 100%); fundal-imagine: -moz-linear-gradient (fund, # 5f73e9 0%, # 859bef 100%); fundal-imagine: -o-gradient linear (fund, # 5f73e9 0%, # 859bef 100%); fundal-imagine: -ms-linear-gradient (fund, # 5f73e9 0%, # 859bef 100%); fundal-imagine: gradient liniar (fund, # 5f73e9 0%, # 859bef 100%); -webkit-box-shadow: inserție 0px 1px 0px # aab9f4; box-shadow: inserție 0px 1px 0px # aab9f4; margin-top: 10px; # intrare slick-login [type = "trimite"]: activ background-color: # 7588e1; fundal-imagine: -webkit-gradient linear (fund, # 7588e1 0%, # 7184df 100%); fundal-imagine: -moz-linear-gradient (fund, # 7588e1 0%, # 7184df 100%); fundal-imagine: -o-linear-gradient (fund, # 7588e1 0%, # 7184df 100%); fundal-imagine: -ms-linear-gradient (fund, # 7588e1 0%, # 7184df 100%); fundal-imagine: gradient linear (fund, # 7588e1 0%, # 7184df 100%); -webkit-box-shadow: inserție 0px 1px 0px # 93a9e9; box-shadow: inset 0px 1px 0px # 93a9e9;
Iată o privire la rezultatul final:
Lucrul grozav despre această formă este că este foarte ușor să se schimbe. De asemenea, este foarte ușor să extindeți, să adăugați mai multe intrări, validare, funcționalitate etc. Vă mulțumim pentru că ați citit de-a lungul și sper că ați învățat ceva. Voi fi interesat să aud ce folosiți pentru asta!
