Jednou z nejdůležitějších sekcí každé webové stránky je kontaktní formulář, který může být stejně jednoduchý jako přidání několika jednoduchých polí a tlačítko pro odeslání těchto zadaných informací, ale vždy můžeme jít o kousek dál a pokud jsme kreativní, implementovat kontaktní formulář, který nejenže plní své vlastní funkce, ale také poskytuje vizuální a uživatelsky přívětivý efekt.
Podívejme se tedy na kroky, které je třeba provést při implementaci tohoto formuláře, který bude simulovat obálku, která při najetí kurzorem myši umožní uživateli vyplnit údaje v rámci písmene, a to vše za použití HTML Y CSS3.
Majetek nebo zdroje
Nejprve musíme mít obálku, kam půjde náš dopis, k tomu použijeme dva různé obrázky, jeden z horní části obálky a druhý zespodu, což v kombinaci s přechody nám poskytne požadovaný efekt.
Jak vidíme, nejsou nijak složité, nicméně tyto obrázky jsou v repozitáři vytvořeném pro tento příklad, který najdete na konci tutoriálu v odpovídajícím odkazu ke stažení.
Konstrukce formy
Nejprve vytvoříme soubor HTML, který se bude jmenovat contact_form.html který bude obsahovat náš formulář jako takový a zahrnutí souboru .css, který bude mít na starosti zpracování jeho stylů a také přechodů, podívejme se, jak to vypadá:
Kontaktní formulářNyní stačí vytvořit náš .css s názvem styles.css a tam umístěte styly pro naši formu a použijte přechody ke generování požadovaného efektu, nejprve trochu změníme vzhled svého těla, aby mu dodalo vzhled písmene:Ahoj!
Zpráva:Zadejte své údaje
Jméno: E -mail:
body {background: #ccc url ('img / bg_carta_fuera.png.webp'); barva: # 7c7873; font-family: 'helvetica';} p {text-shadow: 0 1px 0 #fff; velikost písma: 24px;} # obtékání {šířka: 530px; okraj: 20px auto 0; výška: 1000px;} h1 {margin-bottom: 20px; zarovnání textu: střed; velikost písma: 48 pixelů; text-stín: 0 1px 0 # ede8d9; }Jakmile to bude hotové, implementujeme přechody v div, který obsahuje formulář, který použijeme přechod v různých variantách pro každý prohlížeč a s hodnotou snadnost vstup-výstup Poskytneme vám efekt pomalého začátku a konce:
#form_wrap {overflow: hidden; výška: 446px; poloha: relativní; nahoře: 0px; -webkit-transition: všechny 1s easy-in-out .3s; -moz-transition: všechny 1s easy-in-out .3s; -o-transition: všechny 1s snadné-in-out .3s; přechod: všechny 1 s snadné uvolnění 3 s;}Nyní s pseudo prvky před Y despues de dokončíme efekt dopisu vycházejícího z obálky, podívejme se:
#form_wrap: před {content: ""; pozice: absolutní; dole: 128px; vlevo: 0px; pozadí: url ('img / before.png.webp'); šířka: 530px; výška: 316px;} #form_wrap: po {content: ""; pozice: absolutní; dole: 0px; vlevo: 0; pozadí: url ('img / after.png.webp'); šířka: 530px; výška: 260px; }Nakonec do tlačítka pro odeslání přidáme některé styly, abychom mohli ovládat jak zobrazení, tak efekty na něm:
#form_wrap vstup [typ = odeslat] {pozice: relativní; font-rodina: 'helvetica'; velikost písma: 24px; barva: # 7c7873; text-stín: 0 1px 0 #fff; šířka: 100%; zarovnání textu: střed; krytí: 0; pozadí: žádné; kurzor: ukazatel; -moz-border-radius: 3px; -webkit-border-radius: 3px; poloměr ohraničení: 3px; -webkit-transition: opacita .6s easy-in-out 0s; -moz-transition: opacita .6s easy-in-out 0s; -o-transition: opacita .6s easy-in-out 0s; přechod: opacita 0,6s easy-in-out 0s; } #form_wrap: hover input [type = submit] {z-index: 1; opacity: 1; -webkit-transition: neprůhlednost 0,5 s snadné uvolnění 1,3 s; -moz-transition: neprůhlednost 0,5 s snadné uvolnění 1,3 s; -o-přechod: neprůhlednost 0,5 s snadné uvolnění 1,3 s; přechod: neprůhlednost 0,5 s snadné uvolnění 1,3 s;}Pojďme se tedy podívat, jak vypadá náš počáteční kontaktní formulář, když jej spustíme v prohlížeči:
ZVĚTŠIT
Pokud na něj umístíme kurzor myši, uvidíme funkce, které formulář zobrazí, aby bylo možné zadávat data a odesílat:
ZVĚTŠIT
Jak vidíme, konstrukce této formy byla docela jednoduchá a nejlepší na tom je, že nejsme vázáni na žádnou externí knihovnu, takže její implementace je na jakémkoli webu docela jednoduchá, zbývá jen každému rozšířit příklad a provést funkce odesílám pomocí nějakého programovacího jazyka, jako je PHP, Rubín, Krajta nebo dokonce Node.js.
