En av de viktigste delene på et hvilket som helst nettsted er kontaktskjemaet, som kan være så enkelt som å legge til noen få enkle felt og en knapp for å sende denne informasjonen, men vi kan alltid gå litt lenger, og hvis vi er kreative, kan du implementere en kontaktskjema som ikke bare oppfyller dens innebygde funksjonalitet, men også gir en visuell og brukervennlig effekt.
La oss se trinnene som skal følges for implementering av dette skjemaet som vil simulere en konvolutt som når du holder musepekeren vil la brukeren fylle ut dataene i det som vil være en bokstav, og alt dette ved bruk av HTML Y CSS3.
Eiendeler eller ressurser
Først må vi ha konvolutten vår hvor brevet vårt skal gå, for dette vil vi bruke to forskjellige bilder, ett fra toppen av konvolutten og et annet fra bunnen, som kombinert med overgangene vil gi oss den effekten vi ønsker.
Som vi kan se, er de ikke kompliserte i det hele tatt, men disse bildene er i depotet som er opprettet for dette eksemplet, som du finner på slutten av opplæringen i den tilhørende lenken for nedlasting.
Formkonstruksjon
Vi lager først en HTML -fil som vil bli kalt contact_form.html som vil inneholde skjemaet vårt som sådan og inkluderingen av .css -filen som skal stå for håndteringen av dens stiler samt overganger, la oss se hvordan det ser ut:
Kontakt skjemaNå trenger vi bare å lage .css kalt styles.css og det plasserer stiler for vår form og bruker overgangene til å generere ønsket effekt, først vil vi endre utseendet på kroppen vår litt for å gi den et bokstavs utseende:Hei der!
Beskjed:Skriv inn dine detaljer
Navn: E -post:
body {bakgrunn: #ccc url ('img / bg_carta_fuera.png.webp'); farge: # 7c7873; font-family: 'helvetica';} p {tekstskygge: 0 1px 0 #fff; skriftstørrelse: 24px;} # wrap {bredde: 530px; margin: 20px auto 0; høyde: 1000px;} h1 {margin-bottom: 20px; tekstjustering: senter; skriftstørrelse: 48px; tekstskygge: 0 1px 0 # ede8d9; }Når dette er gjort skal vi implementere overgangene i div som inneholder skjemaet for dette vi skal bruke overgang i sine forskjellige varianter for hver nettleser og med verdien lett inn-ut Vi gir deg effekten av en treg start og slutt:
#form_wrap {overflow: hidden; høyde: 446px; posisjon: slektning; topp: 0px; -webkit-overgang: alle 1-erne er lette å komme inn. 3s; -moz-overgang: alle 1-erne er lette å komme inn. 3s; -o-overgang: alle 1-erne er lette å komme inn. 3-er; overgang: alle 1-erne er lette å komme inn .3-er;}Nå med pseudo -elementene før Y despues de vi vil fullføre effekten av brevet som kommer ut av konvolutten, la oss se:
#form_wrap: før {content: ""; posisjon: absolutt; bunn: 128px; venstre: 0px; bakgrunn: url ('img / before.png.webp'); bredde: 530px; høyde: 316px;} #form_wrap: etter {content: ""; posisjon: absolutt; bunn: 0px; venstre: 0; bakgrunn: url ('img / after.png.webp'); bredde: 530px; høyde: 260px; }Til slutt legger vi til noen stiler til send -knappen for å kontrollere både skjermen og effektene på den:
#form_wrap input [type = submit] {position: relative; font-family: 'helvetica'; skriftstørrelse: 24px; farge: # 7c7873; tekstskygge: 0 1px 0 #fff; bredde: 100%; tekstjustering: senter; ugjennomsiktig: 0; bakgrunn: ingen; markør: peker; -moz-border-radius: 3px; -webkit-border-radius: 3px; kant-radius: 3px; -webkit-overgang: opasitet .6s letthet-i-out 0s; -moz-overgang: opasitet .6s letthet-i-out 0s; -o-overgang: opacity .6s easy-in-out 0s; overgang: opasitet .6s letthet-i-ut 0s; } #form_wrap: sveve input [type = submit] {z-index: 1; opacity: 1; -webkit-overgang: opasitet .5s, lett inn-ut 1.3s; -moz-overgang: opasitet .5s, lett å gå inn 1,3s; -o-overgang: opasitet .5s, lett å gå inn 1,3s; overgang: opasitet. 5s lett inn-ut 1.3s;}Så la oss se hvordan vårt første kontaktskjema ser ut når vi kjører det i nettleseren:
FORSTØRRE
Hvis vi holder musepekeren over den, ser vi funksjonaliteten som skjemaet vises for å kunne legge inn dataene og sende:
FORSTØRRE
Som vi kan se, var konstruksjonen av dette skjemaet ganske enkelt, og det beste av alt er at vi ikke er knyttet til noe eksternt bibliotek, så implementeringen er ganske enkel på et hvilket som helst nettsted. Det gjenstår bare for alle å utvide eksemplet og utføre funksjonaliteten til jeg sender ved hjelp av et programmeringsspråk, for eksempel PHP, Rubin, Python eller Node.js.
