Jedan od najvažnijih odjeljaka bilo koje web stranice je obrazac za kontakt koji može biti jednostavan kao što je dodavanje nekoliko jednostavnih polja i gumb za slanje unesenih podataka, ali uvijek možemo otići malo dalje, a ako smo kreativni, implementirajte obrazac za kontakt koji ne samo da ispunjava svoju inherentnu funkcionalnost, već pruža i vizualni učinak.
Pogledajmo korake koje treba slijediti za implementaciju ovog obrasca koji će simulirati omotnicu koja će prilikom prelaska kursorom miša omogućiti korisniku da popuni podatke unutar onoga što će biti slovo, a sve to uz upotrebu HTML Y CSS3.
Imovina ili sredstva
Prvo moramo imati svoju omotnicu kamo će ići naše pismo, za to ćemo upotrijebiti dvije različite slike, jednu s vrha omotnice, a drugu odozdo, što će nam u kombinaciji s prijelazima dati željeni učinak.
Kao što vidimo, nisu nimalo komplicirani, međutim, ove se slike nalaze u spremištu stvorenom za ovaj primjer koje ćete pronaći na kraju vodiča u odgovarajućoj vezi za preuzimanje.
Konstrukcija oblika
Prvo ćemo stvoriti HTML datoteku koja će se zvati contact_form.html koji će sadržavati naš obrazac kao takav i uključivanje .css datoteke koja će biti zadužena za rukovanje njegovim stilovima kao i prijelazima, da vidimo kako to izgleda:
Kontakt obrazacSada samo trebamo stvoriti naš .css zvan stilovi.css i tu postavimo stilove za naš oblik i koristimo prijelaze za stvaranje željenog učinka, prvo ćemo malo promijeniti izgled našeg tijela kako bismo mu dali izgled slova:Bok tamo!
Poruka:Unesite svoje podatke
Ime: Email:
body {pozadina: #ccc url ('img / bg_carta_fuera.png.webp'); boja: # 7c7873; font-family: 'helvetica';} p {text-shadow: 0 1px 0 #fff; font-size: 24px;} # wrap {width: 530px; margina: 20px auto 0; visina: 1000px;} h1 {margin-bottom: 20px; text-align: center; font-size: 48px; text-shadow: 0 1px 0 # ede8d9; }Nakon što to učinimo, implementirat ćemo prijelaze u div koji sadrži obrazac za to ćemo koristiti tranzicija u različitim varijantama za svaki preglednik i s vrijednošću lakoća ulaska Dati ćemo vam učinak sporog početka i kraja:
#form_wrap {overflow: hidden; visina: 446px; položaj: relativan; vrh: 0px; -webkit-prijelaz: svi 1s olakšanje-u-out .3s; -moz-prijelaz: sve 1s olakšanje-u-out .3s; -o-prijelaz: sve 1s olakšanje-u-out .3s; prijelaz: svi 1s olakšanje-u-out .3s;}Sada s pseudo elementima prije Y despues de upotpunit ćemo učinak pisma koje izlazi iz omotnice, da vidimo:
#form_wrap: before {content: ""; položaj: apsolutni; dolje: 128px; lijevo: 0px; pozadina: url ('img / before.png.webp'); width: 530px; height: 316px;} #form_wrap: after {content: ""; position: absolute; dno: 0px; lijevo: 0; pozadina: url ('img / after.png.webp'); širina: 530px; visina: 260px; }Na kraju, gumbu za slanje dodajemo neke stilove kako bismo kontrolirali prikaz i učinke na njega:
#form_wrap input [type = submit] {position: relative; font-family: 'helvetica'; font-size: 24px; boja: # 7c7873; sjena teksta: 0 1px 0 #fff; širina: 100%; poravnavanje teksta: središte; neprozirnost: 0; pozadina: nema; pokazivač: pokazivač; -moz-border-radius: 3px; -webkit-border-radius: 3px; rub-radijus: 3px; -webkit-prijelaz: neprozirnost .6s jednostavnost ulaska-izlaza 0s; -moz-prijelaz: neprozirnost .6s lakoća ulaza 0s; -o-prijelaz: neprozirnost .6s lakoća ulaza 0s; prijelaz: neprozirnost .6s easy-in-out 0s; } #form_wrap: hover input [type = submit] {z-index: 1; neprozirnost: 1; -webkit-prijelaz: neprozirnost .5s lakoća ulaska 1.3s; -moz-prijelaz: neprozirnost .5s lakoća ulaska-van 1.3s; -o-prijelaz: neprozirnost .5s lakoća ulaska-1,3s; prijelaz: neprozirnost .5s lakoća ulaska 1.3s;}Pa da vidimo kako izgleda naš početni obrazac za kontakt kada ga pokrenemo u pregledniku:
POVEĆAJTE
Ako zadržite pokazivač miša iznad njega, vidjet ćemo funkcionalnost prikazane forme za unos podataka i slanje:
POVEĆAJTE
Kao što vidimo, konstrukcija ovog obrasca bila je prilično jednostavna, a najbolje od svega je što nismo vezani za bilo koju vanjsku knjižnicu pa je njezina implementacija prilično jednostavna na bilo kojoj web stranici, samo je svima potrebno proširiti primjer i izvesti funkcionalnost koju šaljem pomoću nekog programskog jezika, kao što je PHP, Rubin, Piton ili čak Node.js.
