Vytvoření formuláře přihlášení efektu skládaného papíru

Tento článek je součástí našeho "HTML5 / CSS3 Tutorials series" - které jsou určeny k tomu, abyste z vás učinili lepšího návrháře a / nebo vývojáře. Klikněte zde zobrazit více článků ze stejné série.

Přihlašovací formuláře jsou nezbytnou součástí každé dynamické webové stránky. Poskytují uživatelům webových stránek mechanismus přístupu k omezenému obsahu. V tomto tutoriálu se budeme zabývat mnoha funkcemi CSS3, jako jsou textové stíny, box-shadow, lineární přechody a přechody, abychom vytvořili jednoduchý a elegantní přihlašovací formulář s pohledem naskládaným na papír.

Obrázek nahoře ukazuje náhled přihlašovacího formuláře, který budeme stavět. Připraveni se ponořit? Začněme!

1. Základní značení HTML

HTML markup, který budeme používat, je velmi jednoduchý, po deklaraci HTML5 Doctype máme a </code> tagy. V rámci <code><body></code> tag, máme <code><section></code> tag s třídou 'stacked'. Tento <code><section></code> tag slouží k definování šířky pole obsahu a jeho zarovnání do středu stránky. Tento název třídy použijeme také k cílení této značky pomocí CSS. A <code><form></code> následuje <code><section></code> štítek. Značka formuláře nemá platnou hodnotu pro atribut 'action', protože se používá pouze pro účely demonstrace. Uvnitř pole formuláře jsou deklarace pro štítky e-mailu a hesla a vstupní pole, následované tlačítkem Odeslat. Důležité je poznamenat, že jsme použili vstupní pole s typem „e-mailu“. To nám poskytuje deklarace HTML5 a degraduje ladně do běžného textového pole ve starších prohlížečích.</p> <p>Zde je celý kód HTML:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Jednoduchý formulář pro přihlášení

  Přihlásit se
   E-mailem  
   Heslo

     A zde je náhled toho, co jsme dosud vytvořili:
  
 2. Přidání základních stylů
 Vytvořte nový soubor css s názvem master.css a přidat odkaz na tento soubor ve vašem hlavním HTML souboru. Spustíme náš soubor CSS rychlým resetem, abychom získali uniformitu v různých prohlížečích. Pojďme také přidat pěkný obrázek na pozadí naší stránky. Obraz, který jsem použil, byl převzat z SubtlePatterns. Nebojte se procházet stránky najít obrázek na pozadí, který vyhovuje vašemu vkusu. Obrázek pozadí můžeme přidat pomocí následujícího prohlášení. Všimněte si také, že používám Otevřete Sans písmo z webového písma Google pro text těla.
  / * -------- Základní styly --------- * / body, html margin: 0; výplň: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") vlevo horní opakování; písmo: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; okraj: 80px auto; 
 3. Skládaný papírový efekt
 Nyní, když máme základní rozložení a běží, můžete začít s návrhem formuláře. Pro dosažení efektu skládaného papíru využijeme :po a :před pseudo-elementy. Tyto pseudo-elementy se většinou používají pro přidávání vizuálních efektů do libovolného selektoru. 
  :před pseudo-element se používá k přidávání obsahu před obsahem voliče a :po pseudo-element pro po obsahu selektoru. 
 Začneme tím, že dáme sekci s třídou „stacked“, šířkou 400px a výškou 300px. Dále dáme tomuto boxu barvu pozadí # f6f6f6 a 1-pixel-tlustý okraj s barvou #bbb. Klíčové věci, které je třeba si povšimnout, jsou deklarace hranic a deklarace boxu. Zde byly použity předpony „-moz-“ a „-webkit-“, aby bylo zajištěno, že bude fungovat v prohlížečích založených na gecku a webkit. 
 Deklarace hraničního rádiusu je velmi jednoduchá a používá se k vytvoření zaoblených rohů, kde 3px představuje zakřivení. Syntaxe deklarace box-shadow může vypadat komplikovaně, ale rozdělme ji na menší kousky, abychom to lépe pochopili. 
  / * -------- Border Radius --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; hraniční rádius: 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); box-shadow: 0 0 3px rgba (0,0,0, .2);
 První dvě nuly označují x-offset a y-offset a 3px označuje rozostření. Dále je deklarace barev. Použil jsem zde hodnoty rgba; rgba je zkratka pro červenou zelenou modrou a alfa (neprůhlednost). 4 hodnoty uvnitř závorek tedy označují množství červené, zelené, modré a její alfa (opacity).
  .stacked background: # f6f6f6; hranice: 1px pevná #bbb; výška: 300px; okraj: 50px auto; poloha: relativní; šířka: 400px; -webk-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); -webk-border-radius: 3px; -moz-border-radius: 3px; hraniční rádius: 3px; 
 Nyní, když jsme vytvořili základní ohraničovací rámeček pro formulář, začněme s :po a :před pseudo-elementy. 
  .stacked: after, .stacked: before background: # f6f6f6; hranice: 1px pevná #aaa; dole: -8px; obsah: "; výška: 250px; vlevo: 2px; pozice: absolutní; šířka: 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-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; moz-border-radius: 3px; border-radius: 3px; .stacked: before bottom: -14px; vlevo: 5px; šířka: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px hraniční poloměr: 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 pro: po a: před pseudoprvky jsou téměř přesně podobné tomu, který je popsán výše. Jediné důležité je poznamenat, že tyto pseudoprvky jsou umístěny absolutně vzhledem k ohraničovacímu rámečku. Každý z pseudo-elementů je postupně snižován o několik pixelů, aby měl vzhled naskládaného papíru.
 4. Vstupní pole
 V značce HTML jsme přidali třídu „textového vstupu“ do pole pro e-mail i do pole pro heslo, které nám umožňuje snadno cílit tyto prvky na deklarace CSS. Zde je deklarace CSS, která je aplikována na obě vstupní pole.
  input input.text-input outline: 0; zobrazení: blok; šířka: 330px; polstrování: 8px 15px; okraj: 1px pevná šedá; velikost písma: 16px; hmotnost písma: 400; -webk-border-radius: 25px; -moz-border-radius: 25px; hraniční rádius: 25px; box-shadow: vložka 0 2px 8px rgba (0,0,0,0,3); 
 Zde jsme opět využili deklarace hraničního poloměru a boxu. V případě textových polí má poloměr ohraničení vyšší hodnotu, aby bylo zajištěno větší zakřivení. V případě deklarace box-shadow bylo vložení klíčového slova použito k určení, že stín bude uvnitř textového pole. Zde je vertikální ofset pro stín 2px a má rozostření 8px, barva je deklarována pomocí formátu rgba.
 Chcete-li do vstupních polí přidat nějakou interaktivitu, změníme vlastnost box-shadow pro vstupní pole ve stavu „hover“. Nová deklarace box-shadow má nulové posuny x a y, ale má 5px rozostření, s barvou deklarovanou ve formátu rgba.
 5. Tlačítko Odeslat
 Poslední část tohoto formuláře, kterou musíme vyplnit, je tlačítko Odeslat. Podobně jako u vstupního pole dáme tlačítku odeslání poloměr 25px pomocí vlastnosti hraničního rádiusu. Vlastnost box-shadow s y-ofsetem 1px byla také přidána, aby bylo tlačítko a “vnitřní stín” účinek.
  form input [typ = 'submit'] float: right; polstrování: 10px 20px; zobrazení: blok; kurzor: ukazatel; velikost písma: 16px; hmotnost písma: 700; barva: #ff; text-shadow: 0 1px 0 # 000; barva pozadí: # 0074CC; okraj: 1px pevné # 05C; -webk-border-radius: 25px; -moz-border-radius: 25px; hraniční rádius: 25px; pozadí-obraz: -moz-lineární gradient (top, # 08C, # 05C); pozadí-obraz: -ms-lineární gradient (top, # 08C, # 05C); pozadí-obraz: -webk-lineární gradient (top, # 08C, # 05C); pozadí-obraz: lineární gradient (top, # 08C, # 05C); -webk-box-shadow: inset 0 1px 0px rgba (255, 255, 255, 0,5); -moz-box-shadow: inset 0 1px 0px rgba (255, 255, 255, 0,5); box-shadow: inset 0 1px 0px rgba (255, 255, 255, 0,5); 
 Důležité je poznamenat prohlášení pro přidání přechodu na toto tlačítko. CSS3 přechody jsou poměrně velké téma a my budeme jen poškrábání povrchu. Pro toto tlačítko odeslání přidáme lineární přechod přecházející z # 08C na # 05C. Stejně jako všechny ostatní vlastnosti CSS3, které jsme dosud používali, přidáme předpony „-moz“, „-webkit“ a „-ms“, abychom zajistili, že přechod bude fungovat v různých prohlížečích.
 6. Demo a Download
 Náš přihlašovací formulář je nyní kompletní. Podívejte se na ukázku, jak vypadá vyplněný formulář. Pokud jste se kdykoli ztratili nebo jste nemohli sledovat výukový program, nebojte se, stáhněte si soubory do svého počítače a pohrávejte si s existujícím kódem CSS, abyste pochopili, jak to funguje..
 Doufám, že jste si tento návod užili. Nebojte se experimentovat s těmito funkcemi a nezapomeňte se podělit o své myšlenky.
 Demo
 Soubory ke stažení
 
Poznámka editora: Tento příspěvek je napsán Bharani M pro Hongkiat.com. Bharani je návrhář / vývojář z New Delhi, Indie. On je v současné době pracuje na Resumonk.com - online životopis stavitel, který vám pomůže vytvořit profesionální a krásný životopis během několika minut. Také se podívejte na jeho vedlejší projekt - Quotescube.com - vaše denní dávka citací.