Izrada obrasca za prijavu efekata složenih papira

Ovaj članak je dio našeg "Serija vodiča za HTML5 / CSS3" - posvećeni pomoći da postanete bolji dizajner i / ili programer. Kliknite ovdje da biste vidjeli više članaka iz iste serije.

Prijavni obrasci bitan su dio svake dinamičke web-lokacije. Oni pružaju mehanizam za korisnike web-mjesta za pristup ograničenom sadržaju. U ovom vodiču istražit ćemo mnogo CSS3 značajki kao što su text-shadow, box-shadow, linearni gradijenti i prijelazi kako bismo stvorili jednostavan i elegantan obrazac za prijavu s izgledom složenih papira..

Gornja slika prikazuje pregled obrasca za prijavu koji ćemo graditi. Spremni za ronjenje? Započnimo!

1. Osnovna HTML oznaka

HTML oznaka koju ćemo koristiti vrlo je jednostavna, nakon HTML5 Doctype deklaracije, imamo i </code> oznake. Unutar <code><body></code> tag, imamo a <code><section></code> oznaka s klasom "složenih". Ovaj <code><section></code> Oznaka se koristi za definiranje širine okvira sadržaja i za poravnanje prema središtu stranice. Naziv klase također ćemo upotrijebiti za ciljanje ove oznake pomoću CSS-a. <code><form></code> slijedi oznaka <code><section></code> označiti. Oznaka obrasca nema važeću vrijednost za atribut "radnja" jer se koristi samo u svrhu demonstracije. Unutar polja obrasca nalaze se izjave za oznake e-pošte i zaporke te polje za unos, nakon čega slijedi gumb za slanje. Važno je napomenuti da smo koristili polje za unos s vrstom 'e-pošte'. To nam daje HTML5 deklaracija i graciozno se degradira na uobičajeno polje za unos teksta u starijim preglednicima.</p> <p>Ovo je cjelokupna HTML oznaka:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Jednostavan obrazac za prijavu

  Prijaviti se
   E-mail  
   Zaporka

     I evo pregleda onoga što smo do sada stvorili:
  
 2. Dodavanje osnovnih stilova
 Kreirajte novu css datoteku master.css i dodajte vezu na tu datoteku u glavnoj HTML datoteci. Započet ćemo CSS datoteku s brzim resetiranjem kako bismo dobili ujednačenost u različitim preglednicima. Također dodajte lijepu pozadinsku sliku našoj stranici. Slika koju sam koristio preuzeta je iz SubtlePatterns. Slobodno pregledajte web-lokaciju kako biste pronašli pozadinsku sliku koja odgovara vašem ukusu. Možemo dodati pozadinsku sliku uz pomoć sljedeće deklaracije. Također imajte na umu da koristim Otvori Sans font iz Google Web Fonta za tekst.
  / * -------- Osnovni stilovi --------- * / body, html margin: 0; padding: 0;  tijelo pozadina: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") lijevo gornje ponavljanje; font: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; margina: 80px auto; 
 3. Učinak složenog papira
 Sada kada imamo osnovni izgled i pokretanje, možemo početi s dizajniranjem obrasca. Za postizanje učinka slaganja papira koristit ćemo se :nakon i :prije pseudo-elementi. Ovi pseudo-elementi se uglavnom koriste za dodavanje vizualnih efekata bilo kojem selektoru. 
  :prije pseudo-element se koristi za dodavanje sadržaja prije sadržaja selektora i :nakon pseudo-element za sadržaj nakon selektora. 
 Započet ćemo dajući odjeljak, s klasom 'stacked', širinom od 400px i visinom od 300px. Nadalje, ovom ćemo okviru dati boju pozadine # f6f6f6 i granicu debljine 1 piksela s bojom #bbb. Ovdje treba naglasiti ključnu izjavu o radijusu granice i deklaraciju kutija-sjena. Ovdje su prefiksi preglednika "-moz-" i "-webkit-" upotrijebljeni kako bi se osiguralo da to funkcionira u preglednicima na temelju gecka i webkit-a. 
 Deklaracija granice-radijusa je vrlo jednostavna i koristi se za stvaranje zaobljenih kutova, pri čemu 3px predstavlja zakrivljenost. Sintaksa za deklaraciju box-shadow može izgledati komplicirano, ali neka nas podijeli na manje dijelove da bismo je bolje razumjeli. 
  / * -------- Radijus granice --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; granični polumjer: 3px; / * -------- Box Shadow --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); kutija-sjena: 0 0 3px rgba (0,0,0, .2);
 Prva dva nula označavaju x-offset i y-offset, a 3px označava zamućenje. Sljedeća je deklaracija o boji. Ovdje sam koristio vrijednosti rgba; rgba označava crveno zeleno plavo i alfa (neprozirnost). Stoga 4 vrijednosti unutar zagrada označavaju količinu crvene, zelene, plave i njezine alfa (neprozirnosti).
  .naslagano pozadina: # f6f6f6; granica: 1px solid #bbb; visina: 300px; margina: 50px auto; pozicija: relativna; širina: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); kutija-sjena: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; granični polumjer: 3px; 
 Sada kada smo napravili osnovni okvir za ograničenje obrasca, počnimo s :nakon i :prije pseudo-elementi. 
  .složen: poslije, .stacked: prije background: # f6f6f6; granica: 1px solid #aaa; dno: -8px; sadržaj: "; visina: 250px; lijevo: 2px; pozicija: apsolutna; širina: 394px; z-indeks: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); - moz-box-shadow: 0 0 3px rgba (0,0,0, .2), kutija-sjena: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; - moz-border-radius: 3px; granica-radius: 3px; .stacked: prije bottom: -14px; lijevo: 5px; širina: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px ; -međa polumjera: 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); -sjenilo: 0 0 15px rgba (0,0,0,0,5);
 Kôd za: poslije i: prije pseudo-elemenata je gotovo točno sličan onome u graničnom okviru koji je gore opisan. Ovdje je jedino važno napomenuti da su ti pseudoelementi apsolutno postavljeni s obzirom na granični okvir. Svaki od pseudo-elemenata se postupno spušta za nekoliko piksela kako bi se dobio izgled slaganog papira.
 4. Polja za unos
 U HTML oznaci dodali smo klasu "unosa teksta" u polje za e-poštu i za lozinku kako bismo mogli jednostavno ciljati te elemente pomoću naših CSS deklaracija. Evo CSS deklaracije koja se primjenjuje na oba polja za unos.
  obrazac input.text-input outline: 0; prikaz: blok; širina: 330px; obloga: 8px 15px; granica: 1px čvrsto siva; veličina fonta: 16px; težina fonta: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; granični radijus: 25px; kutija-sjena: umetak 0 2px 8px rgba (0,0,0,0.3); 
 Ovdje smo ponovno koristili deklaracije graničnog radijusa i kutije-sjene. U slučaju tekstualnih polja, radijus granice ima veću vrijednost kako bi se osigurala veća zakrivljenost. U slučaju deklaracije box-shadow, ključna riječ inset je korištena za određivanje da će sjena biti unutar tekstualnog polja. Ovdje je vertikalni pomak za sjenku 2px i ima zamućenje od 8 piksela, a boja se deklarira pomoću rgba formata.
 Da bi se polja za unos dodala neka interaktivnost, promijenit ćemo svojstvo box-shadow za polje za unos u stanje "hover". Nova deklaracija kutija-sjena ima nulu x i y odstupanja, ali ima zamućenje od 5px, s bojom koja se deklarira u rgba formatu.
 5. Pošalji gumb
 Konačni dio ovog obrasca koji moramo ispuniti je gumb za slanje. Slično polju za unos, gumb za slanje dat ćemo polumjeru od 25 piksela koristeći svojstvo border-radius. Svojstvo kutije-sjene s y-offsetom od 1px također je dodano kako bi se dobio gumb an “unutarnji sjena” posljedica.
  unos obrasca [type = 'submit'] float: desno; obloga: 10px 20px; prikaz: blok; pokazivač: pokazivač; veličina fonta: 16px; težina fonta: 700; boja: #fff; tekst-sjena: 0 1px 0 # 000; boja pozadine: # 0074CC; granica: 1px solid # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; granični radijus: 25px; background-image: -moz-linearni gradijent (vrh, # 08C, # 05C); background-image: -ms-linearni gradijent (vrh, # 08C, # 05C); background-image: -webkit-linearni gradijent (vrh, # 08C, # 05C); background-image: linearni gradijent (vrh, # 08C, # 05C); -webkit-box-shadow: umetak 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-shadow: umetak 0 1px 0px rgba (255, 255, 255, 0.5); box-shadow: umetak 0 1px 0px rgba (255, 255, 255, 0.5); 
 Važno je ovdje napomenuti deklaraciju za dodavanje gradijenta ovom gumbu. CSS3 gradijenti su prilično velika tema i samo ćemo češati površinu. Za ovaj gumb za slanje, dodavat ćemo linearni gradijent od # 08C do # 05C. Kao i kod svih ostalih CSS3 svojstava koje smo do sada koristili, dodavat ćemo prefiksima dobavljača "-moz", "-webkit" i "-ms" kako bismo osigurali da gradijent funkcionira u različitim preglednicima.
 6. Demo i preuzimanje
 Obrazac za prijavu je sada dovršen. Pogledajte demo da biste vidjeli kako izgleda ispunjeni obrazac. Ako ste izgubljeni u bilo kojem trenutku ili niste mogli pratiti vodič, ne brinite, samo preuzmite datoteke na radnu površinu i pokrenite postojeći CSS kod kako biste razumjeli kako funkcionira.
 Nadam se da ste uživali u ovom tutorialu. Slobodno eksperimentirajte s ovim značajkama i ne zaboravite podijeliti svoje misli.
 Demo
 Preuzimanje datoteka
 
Napomena urednika: Ovaj post je napisao / la Bharani M za Hongkiat.com. Bharani je dizajner / programer iz New Delhija, Indija. On je trenutno radi na Resumonk.com - online životopis graditelj koji vam pomaže stvoriti profesionalne i lijepe nastaviti u nekoliko minuta. Također provjerite njegov strani projekt - Quotescube.com - svoju dnevnu dozu citata.