En af de vigtigste sektioner på ethvert websted er kontaktformularen, som kan være lige så simpel som at tilføje et par enkle felter og en knap til at sende disse indtastede oplysninger, men vi kan altid gå lidt længere, og hvis vi er kreative, implementere en kontaktformular, der ikke kun opfylder dens iboende funktionalitet, men også giver en visuel og brugervenlig effekt.
Lad os se de trin, der skal følges for implementeringen af denne formular, der vil simulere en konvolut, der ved at holde musemarkøren vil give brugeren mulighed for at udfylde dataene inden for det, der vil være et bogstav, og alt dette ved brug af HTML Y CSS3.
Aktiver eller ressourcer
Først skal vi have vores konvolut, hvor vores brev går, til dette vil vi bruge to forskellige billeder, et fra toppen af konvolutten og et andet fra bunden, som kombineret med overgangene vil give os den effekt, vi ønsker.
Som vi kan se, er de slet ikke komplicerede, men disse billeder er i det arkiv, der er oprettet til dette eksempel, som du finder i slutningen af selvstudiet i det tilsvarende link til download.
Form konstruktion
Vi opretter først en HTML -fil, der vil blive kaldt contact_form.html som vil indeholde vores formular som sådan og inkluderingen af .css -filen, der skal stå for håndteringen af dens stilarter samt overgange, lad os se, hvordan den ser ud:
KontaktformularNu mangler vi bare at oprette vores .css kaldet styles.css og der placerer stilarter til vores form og bruger overgangene til at generere den ønskede effekt, først vil vi ændre vores krops udseende lidt for at give det et bogstavs udseende:Hej!
Besked:Indtast dine oplysninger
Navn: E -mail:
body {baggrund: #ccc url ('img / bg_carta_fuera.png.webp'); farve: # 7c7873; font-family: 'helvetica';} p {tekstskygge: 0 1px 0 #fff; skrifttype: 24px;} # wrap {bredde: 530px; margen: 20px auto 0; højde: 1000px;} h1 {margin-bund: 20px; tekstjustering: center; skriftstørrelse: 48px; tekstskygge: 0 1px 0 # ede8d9; }Når dette er gjort, skal vi implementere de overgange i div, der indeholder formularen til dette, vi vil bruge overgang i dens forskellige varianter for hver browser og med værdien let ind Vi giver dig effekten af en langsom start og en slutning:
#form_wrap {overløb: skjult; højde: 446px; position: relativ; top: 0px; -webkit-overgang: alle 1'er let-i-ud .3s; -moz-overgang: alle 1'er lette-i-ud .3s; -o-overgang: alle 1'er lette-i-ud .3'er; overgang: alle 1'er lette-i-ud .3s;}Nu med pseudo -elementerne Før Y despues de vi vil fuldføre effekten af brevet, der kommer ud af konvolutten, lad os se:
#form_wrap: før {content: ""; position: absolut; bund: 128px; venstre: 0px; baggrund: url ('img / before.png.webp'); bredde: 530px; højde: 316px;} #form_wrap: efter {content: ""; position: absolut; bund: 0px; venstre: 0; baggrund: url ('img / after.png.webp'); bredde: 530px; højde: 260px; }Endelig tilføjer vi nogle stilarter til knappen Send for at kontrollere både displayet og effekterne på det:
#form_wrap input [type = indsend] {position: relativ; font-familie: 'helvetica'; skrifttype: 24px; farve: # 7c7873; tekstskygge: 0 1px 0 #fff; bredde: 100%; tekstjustering: center; opacitet: 0; baggrund: ingen; markør: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; grænse-radius: 3px; -webkit-overgang: opacitet .6s let-i-ud 0'er; -moz-overgang: opacitet .6s let ind-ud 0'er; -o-overgang: opacitet .6s let-i-out 0'er; overgang: opacitet .6s let-i-ud 0'er; } #form_wrap: svæveindgang [type = indsend] {z-index: 1; opacitet: 1; -webkit-overgang: uigennemsigtighed .5s, der er lette at komme ind 1,3s; -moz-overgang: uigennemsigtighed .5s let ind-ud 1.3s; -o-overgang: uigennemsigtighed .5s 1.3-in-out let; overgang: uigennemsigtighed .5s, der er lette at komme ind 1,3s;}Så lad os se, hvordan vores første kontaktformular ser ud, når vi kører den i browseren:
FORSTØRRE
Hvis vi holder musemarkøren over den, ser vi den funktionalitet, som formularen vises for at kunne indtaste dataene og sende:
FORSTØRRE
Som vi kan se, var opbygningen af denne form ganske enkel, og det bedste af alt er, at vi ikke er bundet til noget eksternt bibliotek, så implementeringen er ganske enkel på ethvert websted, det er kun for alle at udvide eksemplet og udføre funktionaliteten af den jeg sender ved hjælp af et programmeringssprog, som f.eks PHP, Rubin, Python eller endda Node.js.
