Vytváranie prihlasovacieho formulára efektov stackového papiera

Tento článok je súčasťou nášho "HTML5 / CSS3 Tutoriály séria" - ktorá vám pomôže urobiť z vás lepšieho dizajnéra a / alebo vývojára. Kliknite tu zobraziť ďalšie články z rovnakej série.

Prihlasovacie formuláre sú neodmysliteľnou súčasťou všetkých dynamických webových stránok. Poskytujú mechanizmu pre používateľov webových stránok prístup k obmedzenému obsahu. V tejto príručke budeme skúmať veľa funkcií CSS3, ako je textový tieň, box-tieň, lineárne prechody a prechody na vytvorenie jednoduchého a elegantného prihlasovacieho formulára s naskladaným papierovým vzhľadom.

Vyššie uvedený obrázok zobrazuje náhľad prihlasovacieho formulára, ktorý budeme budovať. Chcete sa ponoriť? Začnime!

1. Základná značka HTML

Značka HTML, ktorú budeme používať, je veľmi jednoduchá, po vyhlásení HTML5 Doctype máme a </code> tagy. V rámci <code><body></code> tag, máme <code><section></code> tag s triedou "stacked". toto <code><section></code> značka sa používa na definovanie šírky poľa obsahu a na zarovnanie do stredu stránky. Túto značku použijeme aj na triedenie názvu tejto značky pomocou CSS. <code><form></code> nasleduje značka <code><section></code> tag. Značka formulára nemá platnú hodnotu pre atribút "action", pretože sa používa iba na účely demonštrácie. Do poľa formulára sa nachádzajú deklarácie pre štítky e-mailov a hesiel a vstupné pole, za ktorým nasleduje tlačidlo Odoslať. Dôležité je, že sme použili vstupné pole s typom e-mailu. Toto nám poskytuje deklarácia HTML5 a elegantne sa degraduje do bežného poľa pre zadávanie textu v starších prehliadačoch.</p> <p>Tu je celá značka HTML:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Jednoduchý prihlasovací formulár

  Prihlásiť sa
   e-mail  
   heslo

     A tu je náhľad toho, čo sme doteraz vytvorili:
  
 2. Pridanie základných štýlov
 Vytvorte nový css súbor s názvom master.css a pridajte odkaz do tohto súboru vo vašom hlavnom súbore HTML. Začneme náš súbor CSS rýchlym obnovením, aby sme získali jednotnosť medzi rôznymi prehliadačmi. Pridajme tiež pekný obrázok na pozadí na našej stránke. Obraz, ktorý som použil, bol prevzatý SubtlePatterns. Nebojte sa prechádzať na stránkach a nájsť obrázok na pozadí, ktorý vyhovuje vášmu vkusu. Obrázok pozadia môžeme pridať pomocou nasledujúceho vyhlásenia. Tiež si všimnite, že používam Open Sans písmo z textového textu Google Web Font.
  / * -------- Základné štýly --------- * / body, html margin: 0; polstrovanie: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") vľavo top repeat; písmo: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap šírka: 400px; okraj: 80 pixlov auto; 
 3. Efekt stohovaného papiera
 Teraz, keď máme základné rozloženie a spustenie, môžete začať s navrhovaním formulára. Na získanie efektu vrstveného papiera budeme využívať funkciu : po a : before pseudo-prvky. Tieto pseudo-prvky sa väčšinou používajú na pridávanie vizuálnych efektov ľubovoľnému selektoru. 
  : before pseudo-element sa používa na pridávanie obsahu pred obsahom selektora a : po pseudo-prvok po obsahu selektora. 
 Začneme tým, že sekciu, s triedou "stacked", šírka 400px a výška 300px. Ďalej dáme tomuto oknu farbu pozadia # f6f6f6 a okraj s hrúbkou 1 pixel s farbou #bbb. Kľúčovými faktami, ktoré je potrebné spomenúť, sú deklarácia okraja polomeru a deklarácia tieňovej krabice. Tu boli použité predpony prehliadača "-moz-" a "-webkit-", aby sa zabezpečilo, že to funguje v prehliadačoch gecko a webkit. 
 Vyhlásenie ohraničenia polomeru je veľmi jednoduché a používa sa na vytvorenie zaoblených rohov, pričom 3px predstavuje zakrivenie. Syntax pre vyhlásenie tieňovej krabice môže vyzerať komplikovane, ale rozdelíme ju na menšie kúsky, aby sme ju lepšie pochopili. 
  / * -------- Hraničný polomer --------- * / -webkit-border-radius: 3px; -moz-okraj-polomer: 3px; polomer okrajov: 3px; / * -------- Box Shadow --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-tieň: 0 0 3px rgba (0,0,0, .2); box-tieň: 0 0 3px rgba (0,0,0, .2);
 Prvé dve nuly označujú x-offset a y-offset a 3px označujú rozmazanie. Ďalej je deklarácia farieb. Použil som tu hodnoty rgba; rgba znamená červenú zelenú modrú a alfa (opacita). Hodnoty 4 v zátvorkách označujú množstvo červenej, zelenej, modrej a jej alfa (opacita).
  .stacked background: # f6f6f6; hranica: 1px solid #bbb; výška: 300px; okraj: 50 pixlov auto; pozícia: relatívna; šírka: 400px; -webkit-box-tieň: 0 0 3px rgba (0,0,0, .2); -moz-box-tieň: 0 0 3px rgba (0,0,0, .2); box-tieň: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-okraj-polomer: 3px; polomer okrajov: 3px; 
 Teraz, keď sme vytvorili základné ohraničenie pre formulár, začneme s : po a : before pseudo-elementy. 
  .stacked: after, .stacked: pred background: # f6f6f6; hranica: 1px solid #aaa; spodná časť: -8px; obsah: "; výška: 250px; vľavo: 2px; pozícia: absolútna; šírka: 394px; z-index: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0,2. moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-tieň: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; moz-border-radius: 3px; okraj-polomer: 3px; .zakladaný: pred bottom: -14px; okraj okraja: 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);
 Kód pre: po a: predtým, než sú pseudo-elementy takmer presne podobné tomu v ohraničenom boxe, ktorý je popísaný vyššie. Jediná dôležitá vec, ktorú je potrebné poznamenať, je, že tieto pseudo-prvky sú umiestnené absolútne vzhľadom na ohraničujúci box. Každý z pseudo-elementov sa postupne znižuje o niekoľko pixelov, aby získal vzhľad papiera.
 4. Vstupné polia
 V značke HTML sme pridali triedu "textového vstupu" do poľa e-mailového poľa aj do poľa pre heslo, čo nám umožňuje jednoducho zacieliť tieto prvky pomocou našich vyhlásení CSS. Tu je deklarácia CSS, ktorá sa aplikuje na obe vstupné polia.
  formulár input.text-input outline: 0; zobrazenie: blok; šírka: 330px; polstrovanie: 8px 15px; okraj: 1px šedá; veľkosť písma: 16px; veľkosť písma: 400; -webkit-border-radius: 25px; -moz-okraj-polomer: 25px; polomer okrajov: 25 pixlov; box-tieň: vložiť 0 2px 8px rgba (0,0,0,0,3); 
 Tu sme znova využili hraničné polia a tieňové deklarácie. V prípade textových polí je polomer okraja daný vyššou hodnotou, aby sa zaistilo viac zakrivenia. V prípade deklarácie stĺpca v krabici sa vložka kľúčového slova použila na určenie toho, že tieň bude v textovom poli. Tu je vertikálny posun pre tieň 2px a má rozmazanie 8px, pričom farba je deklarovaná pomocou formátu rgba.
 Ak chcete do vstupných políčok pridať určitú interaktivitu, zmeníme vlastnosť shadow box pre vstupné pole v stave "hover". Nová deklarácia box-tieňa má nulovú odchýlku x a y, ale má rozlíšenie 5 pixlov, pričom farba je deklarovaná vo formáte rgba.
 5. Odošlite tlačidlo
 Posledná časť tohto formulára, ktorú musíme vyplniť, je tlačidlo Odoslať. Podobne ako v poli zadávacieho políčka poskytneme tlačidlo posunutie polomerom 25 px pomocou vlastnosti hraničného polomeru. Vlastnosť box-shadow s y-offsetom 1px bola tiež pridaná, aby sa tlačidlo stalo “inner-shadow” účinok.
  vstup formulára [type = 'submit'] float: right; polstrovanie: 10px 20px; zobrazenie: blok; kurzor: ukazovateľ; veľkosť písma: 16px; veľkosť písma: 700; farba: #fff; textový tieň: 0 1px 0 # 000; farba pozadia: # 0074CC; hranica: 1px pevná # 05C; -webkit-border-radius: 25px; -moz-okraj-polomer: 25px; polomer okrajov: 25 pixlov; obrázok na pozadí: -moz-lineárny gradient (top, # 08C, # 05C); obrázok-pozadie: -ms-lineárny gradient (top, # 08C, # 05C); pozadie-obrázok: -webkit-lineárny gradient (top, # 08C, # 05C); obrázok na pozadí: lineárny gradient (top, # 08C, # 05C); -webkit-box-shadow: vložený 0 1px 0px rgba (255, 255, 255, 0,5); -moz-box-tieň: vložka 0 1px 0px rgba (255, 255, 255, 0,5); box-tieň: vložiť 0 1px 0px rgba (255, 255, 255, 0,5); 
 Dôležité je mať na zreteli deklaráciu pridaním gradientu na toto tlačidlo. Gradienty CSS3 sú pomerne veľké témy a len povrch poškriabeme. Pre toto tlačidlo na odoslanie pridáme lineárny gradient od # 08C do # 05C. Rovnako ako pri všetkých ostatných vlastnostiach CSS3, ktoré sme doteraz používali, pridáme predpony predajcov "-moz", "-webkit" a "-ms", aby sme zabezpečili, že gradient funguje v rôznych prehliadačoch.
 6. Ukážka a prevzatie
 Náš prihlasovací formulár je teraz dokončený. Pozrite sa na demo, aby ste zistili, ako vyplnený formulár vyzerá. Ak ste v každom okamihu stratili alebo ste nemohli pokračovať v príručke, nemusíte mať obavy, stiahnite súbory na pracovnú plochu a dajte si s existujúcim kódom CSS, aby ste pochopili, ako to funguje.
 Dúfam, že ste si tento tutoriál užili. Neváhajte experimentovať s týmito funkciami a nezabudnite zdieľať svoje myšlienky.
 demonštrácie
 Stiahnite si súbory
 
Poznámka redaktora: Tento príspevok je napísaný používateľom Bharani M pre Hongkiat.com. Bharani je dizajnér / developer z New Delhi v Indii. V súčasnosti pracuje na Resumonk.com - tvorcovi životopisov online, ktorý vám pomôže vytvoriť profesionálny a krásny životopis za niekoľko minút. Pozrite sa tiež na jeho bočný projekt - Quotescube.com - vašu dennú dávku úvodzoviek.