Vienas iš svarbiausių bet kurios svetainės skyrių yra kontaktinė forma, kuri gali būti tokia paprasta, kaip pridėti kelis paprastus laukus ir mygtuką įvesti šią įvestą informaciją, tačiau mes visada galime eiti šiek tiek toliau ir, jei esame kūrybingi, įgyvendinkite kontaktinė forma, kuri ne tik atlieka jai būdingas funkcijas, bet ir suteikia vizualų bei patogų efektą.
Pažiūrėkime, kokius veiksmus reikia atlikti įgyvendinant šią formą, kuri imituos voką, kuris, užvedęs pelės žymeklį, leis vartotojui užpildyti duomenis, kurie bus raidė, ir visa tai naudojant HTML Y CSS3.
Turtas ar ištekliai
Pirmiausia turime turėti savo voką ten, kur bus mūsų laiškas, tam mes naudosime du skirtingus vaizdus: vieną iš voko viršaus ir kitą iš apačios, kurie kartu su perėjimais suteiks mums norimą efektą.
Kaip matome, jie visai nesudėtingi, tačiau šie vaizdai yra šiam pavyzdžiui sukurtoje saugykloje, kurią rasite pamokos pabaigoje atitinkamoje atsisiuntimo nuorodoje.
Formos konstrukcija
Pirmiausia sukursime HTML failą, kuris bus vadinamas contact_form.html kuriame bus mūsų forma kaip tokia ir .css failo, kuris bus atsakingas už jo stilių ir perėjimų tvarkymą, įtraukimas, pažiūrėkime, kaip jis atrodo:
Kontaktinė formaDabar mums tereikia sukurti savo .css pavadinimą stilius.css ir įdėkite savo formos stilių ir naudokite perėjimus norimam efektui sukurti, pirmiausia šiek tiek pakeisime savo kūno išvaizdą, kad jis atrodytų kaip raidė:Sveiki!
Pranešimas:Įveskite savo duomenis
Vardas: el. Paštas:
body {background: #ccc url ('img / bg_carta_fuera.png.webp'); spalva: # 7c7873; font-family: 'helvetica';} p {text-shadow: 0 1px 0 #fff; font-size: 24px;} # wrap {width: 530px; paraštė: 20 pikselių automatinis 0; aukštis: 1000 taškų;} h1 {paraštė-apačia: 20 taškų; text-align: centre; šrifto dydis: 48 pikselių; text-shadow: 0 1px 0 # ede8d9; }Kai tai bus padaryta, mes įgyvendinsime perėjimus į div, kuriame yra tam naudojama forma perėjimas skirtinguose kiekvienos naršyklės variantuose ir su reikšme lengvas įvedimas Mes suteiksime jums lėto pradžios ir pabaigos efektą:
#form_wrap {overflow: hidden; aukštis: 446 pikselių; padėtis: giminaitis; viršuje: 0 taškų; -webkit-perėjimas: visi 1s lengvai-in-out .3s; -moz-perėjimas: visi 1s lengvai įleidžiami .3s; -o-perėjimas: visi 1s lengvai įleidžiami .3s; perėjimas: visi 1-oji-lengvai įleidžiami .3s;}Dabar su pseudo elementais anksčiau Y niekina de užbaigsime laiško, išeinančio iš voko, efektą, pažiūrėkime:
#form_wrap: before {content: ""; pozicija: absoliuti; apačioje: 128 taškų; kairėje: 0 taškų; fonas: url ('img / before.png.webp'); plotis: 530 taškų; aukštis: 316 taškų;} #form_wrap: po {content: ""; pozicija: absoliutus; apačioje: 0 taškų; kairėje: 0; fonas: url ('img / after.png.webp'); plotis: 530 taškų; aukštis: 260 taškų; }Galiausiai prie pateikimo mygtuko pridedame keletą stilių, kad galėtume valdyti ir ekraną, ir jo padarinius:
#form_wrap input [type = iesniegt] {pozicija: giminaitis; font-family: 'helvetica'; šrifto dydis: 24 taškų; spalva: # 7c7873; text-shadow: 0 1px 0 #fff; plotis: 100%; text-align: centre; neskaidrumas: 0; fonas: nėra; žymeklis: rodyklė; -moz-border-spindulys: 3px; -webkit-border-spindulys: 3px; ribos spindulys: 3 taškų; -webkit-perėjimas: nepermatomumas .6s lengvumas-in-out 0s; -moz-perėjimas: nepermatomumas .6s lengvumas-in-out 0s; -o-perėjimas: nepermatomumas .6s lengvai įleidžiami 0s; perėjimas: neskaidrumas .6s lengvai įleidžiami 0s; } #form_wrap: užveskite pelės žymeklį [tipas = pateikti] {z-index: 1; neskaidrumas: 1; -webkit-perėjimas: neskaidrumas .5s lengvas-in-out 1.3s; -moz-perėjimas: neskaidrumas .5s lengvas išėjimas 1.3s; -o-perėjimas: neskaidrumas .5s lengvas išėjimas 1.3s; perėjimas: neskaidrumas .5s lengvai įleidžiamas 1,3s;}Taigi pažiūrėkime, kaip atrodo mūsų pradinė kontaktinė forma, kai ją paleidžiame naršyklėje:
DIDELIS
Jei užvesime pelės žymeklį virš jo, pamatysime, kaip forma rodoma, kad būtų galima įvesti duomenis ir išsiųsti:
DIDELIS
Kaip matome, šios formos sukūrimas buvo gana paprastas, o geriausia, kad nesame susieti su jokia išorine biblioteka, todėl jos diegimas yra gana paprastas bet kurioje svetainėje, tik visiems belieka pratęsti pavyzdį ir atlikti siunčiamų funkcijų naudojant tam tikrą programavimo kalbą, pvz PHP, Rubinas, Python ar net Node.js.
