Crearea unui formular de conectare a unui efect de hârtie stivuită

Acest articol este parte a noastră "Seria Tutoriale HTML5 / CSS3" - dedicat pentru a vă ajuta să vă faceți un designer mai bun și / sau un dezvoltator. Click aici pentru a vedea mai multe articole din aceeași serie.

Formularele de conectare reprezintă o parte esențială a oricărui site dinamic. Acestea oferă un mecanism pentru utilizatorii site-ului web pentru a accesa conținut restricționat. În acest tutorial, vom explora o mulțime de caracteristici CSS3 cum ar fi text-shadow, box-shadow, gradienți liniari și tranziții pentru a crea o formă simplă și elegantă de autentificare cu un aspect de hârtie stivuită.

Imaginea de mai sus arată o previzualizare a formularului de autentificare pe care îl vom construi. Sunteți gata să vă plimbați? Să începem!

1. Marcajul HTML de bază

Marcajul HTML pe care îl vom folosi este foarte simplu, după declarația HTML5 Doctype, avem și </code> Etichete. În cadrul <code><body></code> etichetă, avem un a <code><section></code> eticheta cu o clasă de "stivuite". Acest <code><section></code> eticheta este utilizată pentru a defini lățimea casetei de conținut și pentru al alinia la centrul paginii. De asemenea, vom folosi numele clasei acestei etichete pentru a viza această etichetă utilizând CSS. A <code><form></code> eticheta urmează <code><section></code> etichetă. Eticheta de formular nu are o valoare validă pentru atributul "acțiune", deoarece este utilizată doar în scopul demonstrației. În câmpul de formular se află declarațiile pentru etichetele de e-mail și parolă și câmpul de introducere, urmate de un buton de trimitere. Punctul important de reținut aici este că am folosit un câmp de intrare cu un tip de "e-mail". Acest lucru ne este oferit de declarația HTML5 și se degradează grațios într-un câmp obișnuit de introducere a textului în browserele mai vechi.</p> <p>Iată întregul marcaj HTML:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Formular simplu de conectare

  Logare
   E-mail  
   Parola

     Iată o previzualizare a ceea ce am creat până acum:
  
 2. Adăugarea de stiluri de bază
 Creați un nou fișier css numit master.css și adăugați un link la acest fișier în fișierul HTML principal. Vom porni fișierul nostru CSS cu o resetare rapidă pentru a obține uniformitate între diferite browsere. Să adăugăm, de asemenea, o imagine frumoasă de fundal pe pagina noastră. Imaginea pe care am folosit-o a fost luată SubtlePatterns. Simțiți-vă liber să răsfoiți site-ul pentru a găsi o imagine de fundal potrivită gustului dvs. Putem adăuga imaginea de fundal cu ajutorul următoarei declarații. De asemenea, rețineți că folosesc Open Sans font de pe Google Web Font pentru textul corpului.
  / * -------- Stiluri de bază --------- * / body, html margin: 0; umplutura: 0;  corp background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") stânga repeat; font: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; margine: 80px auto; 
 3. Efectul de hârtie stivuită
 Acum, că avem aspectul de bază și funcționează, vă permite să începeți cu proiectarea formularului. Pentru a obține efectul de hârtie stivuită, vom face uz de :după și :inainte de -elemente pseudo. Aceste pseudo-elemente sunt utilizate în majoritatea cazurilor pentru a adăuga efecte vizuale oricărui selector. 
  :inainte de pseudo-elementul este folosit pentru a adăuga conținut înaintea conținutului selectorului și a :după pseudo-element pentru după conținutul selectorului. 
 Vom începe prin a da secțiunii, cu o clasă de "stivuite", o lățime de 400px și o înălțime de 300px. Mai mult, vom da această casetă o culoare de fundal de # f6f6f6 și o margine de 1 pixel gros cu culoarea #bbb. Principalele lucruri pe care trebuie să le menționăm aici sunt declarația de rază de graniță și declarația de umbră a cutiei. Aici, prefixele de browser "-moz-" și "-webkit-" au fost folosite pentru a se asigura că acest lucru funcționează în browserele gecko și webkit. 
 Declarația razei de graniță este foarte simplă și este utilizată pentru a crea colțuri rotunjite, cu 3 pixeli reprezentând curbura. Sintaxa pentru declarația de umbră în cutie ar putea părea complicată, dar să o descompunem în bucăți mai mici pentru ao înțelege mai bine. 
  / * -------- Radius de graniță --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; raza de graniță: 3px; / * -------- Shadow Box --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2);
 Primele două valori zero indică decalajul x și decalajul y, iar cele 3 pixeli indică neclaritatea. Următoarea este declarația de culoare. Am folosit valorile rgba aici; rgba înseamnă albastru roșu și alfa (opacitate). Astfel, cele 4 valori din paranteză indică cantitatea de roșu, verde, albastru și alfa (opacitatea).
  .stivuite background: # f6f6f6; frontieră: 1px solid #bbb; înălțime: 300px; margine: 50 pixeli automat; poziția: relativă; lățime: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; raza de graniță: 3px; 
 Acum, că am creat caseta de bază pentru formular, să începem cu :după și :inainte de pseudo-elementele. 
  .stivuite: după, stocate: înainte de background: # f6f6f6; frontieră: 1px solid #aaa; fund: -8px; (înălțime: 250px; stânga: 2px; poziția: absolută; lățimea: 394px; z-index: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; moz-raza de graniță: 3px; raza de graniță: 3px; .cachetă: înainte de bottom: -14px; stânga: 5px; lățimea: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px raza graniței: 3px; -webkit-box-shadow: 0 0 15px rgba (0,0,0,0,5); -moz-box-shadow: 0 0 15px rgba (0,0,0,0,5) -shadow: 0 0 15px rgba (0,0,0,0,5);
 Codul pentru: după și: înainte ca pseudo-elementele să fie aproape exact similare cu cea a casetei de legare discutate mai sus. Singurul lucru important pe care trebuie să-l observăm aici este că aceste pseudo-elemente sunt poziționate absolut în raport cu cutia de legare. Fiecare element pseudo-element este coborât treptat cu câțiva pixeli pentru a-i da un aspect de hârtie stivuită.
 4. Câmpuri de introducere
 În marcajul HTML, am adăugat o clasă de "text input" atât în câmpul de e-mail, cât și în câmpul de parolă, pentru a ne permite să vizăm cu ușurință aceste elemente cu ajutorul declarațiilor noastre CSS. Iată declarația CSS care se aplică atât câmpurilor de intrare.
  form input.text-input contur: 0; afișare: bloc; lățime: 330px; padding: 8px 15px; margine: 1 pix solid gri; font-size: 16px; greutatea fontului: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; raza de graniță: 25px; box-shadow: inserție 0 2px 8px rgba (0,0,0,0,3); 
 Aici, din nou, am făcut uz de declarațiile de rază de frontieră și de umbre. În cazul câmpurilor de text, raza de graniță are o valoare mai mare pentru a asigura o mai mare curbură. În cazul declarației "shadow box", inserția cuvântului cheie a fost utilizată pentru a specifica că umbra se va afla în interiorul câmpului text. Aici, decalajul vertical al umbrei este de 2 pixeli și are o estompare de 8 pixeli, culoarea fiind declarată utilizând formatul rgba.
 Pentru a adăuga o anumită interactivitate câmpurilor de intrare, vom schimba proprietatea shadow box pentru câmpul de intrare în starea "hover". Noua declarație de box-shadow are decalajul zero și y, dar are o estompare de 5px, culoarea fiind declarată în format rgba.
 5. Trimiteți Button
 Partea finală a acestui formular pe care trebuie să o finalizăm este butonul de trimitere. Similar câmpului de intrare, vom da butonului de trimitere o rază de 25px folosind proprietatea radius-limită. De asemenea, a fost adăugată o proprietate box-shadow cu un y-offset de 1px pentru a da butonul un “umbra interioara” efect.
  formular de intrare [type = 'submit'] float: right; padding: 10px 20px; afișare: bloc; cursor: pointer; font-size: 16px; greutatea fontului: 700; culoare: #fff; text-shadow: 0 1px 0 # 000; fundal-culoare: # 0074CC; frontieră: 1px solid # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; raza de graniță: 25px; fundal-imagine: -moz-linear-gradient (top, # 08C, # 05C); fundal-imagine: -ms-gradient linear (top, # 08C, # 05C); fundal-imagine: -webkit-gradient linear (top, # 08C, # 05C); fundal-imagine: gradient linear (top, # 08C, # 05C); -webkit-box-shadow: inserție 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-shadow: inserție 0 1px 0px rgba (255, 255, 255, 0.5); box-shadow: inserție 0 1px 0px rgba (255, 255, 255, 0.5); 
 Este important să notați aici declarația pentru adăugarea gradientului la acest buton. Gradienții CSS3 reprezintă un subiect destul de mare și vom zgâria numai suprafața. Pentru acest buton de trimitere, vom adăuga un gradient liniar care merge de la # 08C la # 05C. Ca și în cazul celorlalte proprietăți CSS3 pe care le-am utilizat până acum, vom adăuga prefixe furnizoare "-moz", "-webkit" și "-ms" pentru a vă asigura că gradientul funcționează în diferite browsere.
 6. Demonstrație și descărcare
 Formularul nostru de conectare este acum complet. Consultați demo-ul pentru a vedea cum arată formularul completat. Dacă vă pierdeți în orice moment sau nu ați putea continua cu tutorialul, nu vă faceți griji, descărcați fișierele pe desktop și faceți clic pe codul CSS existent pentru a înțelege cum funcționează.
 Sper că v-ați bucurat de acest tutorial. Simțiți-vă liber să experimentați aceste caracteristici și nu uitați să împărtășiți gândurile.
 Demo
 Descărcați fișiere
 
Nota editorului: Această postare este scrisă de Bharani M pentru Hongkiat.com. Bharani este un designer / dezvoltator din New Delhi, India. El lucrează în prezent la Resumonk.com - un constructor online care vă ajută să creați un CV profesional și minunat în câteva minute. De asemenea, verificați proiectul său lateral - Quotescube.com - doza zilnică de citate.