En av de viktigaste sektionerna på någon webbplats är kontaktformuläret, som kan vara så enkelt som att lägga till några enkla fält och en knapp för att skicka denna inmatade information, men vi kan alltid gå lite längre och om vi är kreativa, implementera en kontaktformulär som inte bara uppfyller sin inneboende funktionalitet utan också ger en visuell och användarvänlig effekt.
Låt oss se stegen som ska följas för implementeringen av detta formulär som simulerar ett kuvert som när muspekaren svävar tillåter användaren att fylla i data inom vad som kommer att vara en bokstav, och allt detta med hjälp av HTML Y CSS3.
Tillgångar eller resurser
Först måste vi ha vårt kuvert där vårt brev kommer, för detta kommer vi att använda två olika bilder, en från toppen av kuvertet och en från botten, vilket kombinerat med övergångarna ger oss den effekt vi vill ha.
Som vi kan se är de inte alls komplicerade, men dessa bilder finns i förvaret som skapats för detta exempel som du hittar i slutet av självstudien i motsvarande länk för nedladdning.
Formkonstruktion
Vi kommer först att skapa en HTML -fil som kommer att kallas contact_form.html som kommer att innehålla vår form som sådan och införandet av .css -filen som kommer att ansvara för hanteringen av dess stilar samt övergångar, låt oss se hur det ser ut:
KontaktformulärNu behöver vi bara skapa vår .css som heter styles.css och det finns stilar för vår form och använder övergångarna för att generera önskad effekt, först kommer vi att ändra utseendet på vår kropp lite för att ge det utseendet på en bokstav:Hallå där!
Meddelande:Ange dina uppgif.webpter
Namn: E -post:
body {bakgrund: #ccc url ('img / bg_carta_fuera.png.webp'); färg: # 7c7873; font-family: 'helvetica';} p {text-shadow: 0 1px 0 #fff; typsnitt: 24px;} # wrap {bredd: 530px; marginal: 20px auto 0; höjd: 1000px;} h1 {marginal-botten: 20px; text-align: center; teckenstorlek: 48px; text-skugga: 0 1px 0 # ede8d9; }När detta är gjort ska vi implementera övergångarna i div som innehåller formuläret för detta som vi kommer att använda övergång i dess olika varianter för varje webbläsare och med värdet lätt in-ut Vi ger dig effekten av en långsam start och ett slut:
#form_wrap {overflow: hidden; höjd: 446px; position: relativ; topp: 0px; -webkit-övergång: alla 1: or lätt-in-ut .3s; -moz-övergång: alla 1: orna lätt-in-ut .3-talet; -o-övergång: alla 1: or lätt-in-ut .3: or; övergång: alla 1: orna enkelt in. 3s;}Nu med pseudoelementen innan Y föraktar de vi kommer att slutföra effekten av brevet som kommer ut ur kuvertet, låt oss se:
#form_wrap: före {content: ""; position: absolut; botten: 128px; vänster: 0px; bakgrund: url ('img / before.png.webp'); bredd: 530px; höjd: 316px;} #form_wrap: efter {content: ""; position: absolut; botten: 0px; vänster: 0; bakgrund: url ('img / after.png.webp'); bredd: 530px; höjd: 260px; }Slutligen lägger vi till några stilar till skicka -knappen för att styra både displayen och effekterna på den:
#form_wrap input [type = submit] {position: relativ; font-family: 'helvetica'; typsnitt: 24px; färg: # 7c7873; text-skugga: 0 1px 0 #fff; bredd: 100%; text-align: center; opacitet: 0; bakgrund: ingen; markör: pekare; -moz-border-radie: 3px; -webkit-gräns-radie: 3px; gränsradie: 3px; -webkit-övergång: opacitet .6s lätt-in-out 0s; -moz-övergång: opacitet .6s lätt-in-out 0s; -o-övergång: opacitet .6s lätt-in-out 0s; övergång: opacitet .6s lätt-in-out 0s; } #form_wrap: sväng inmatning [typ = skicka] {z-index: 1; opacitet: 1; -webkit-övergång: opacitet .5s lätt in-ut 1.3s; -moz-övergång: opacitet .5s lätt in-ut 1.3s; -o-övergång: opacitet .5s lätt in-ut 1.3s; övergång: opacitet .5s lätt in-ut 1.3s;}Så låt oss se hur vårt första kontaktformulär ser ut när vi kör det i webbläsaren:
FÖRSTORA
Om vi håller muspekaren över den ser vi funktionaliteten som formuläret visas för att kunna mata in data och skicka:
FÖRSTORA
Som vi kan se var konstruktionen av denna form ganska enkel och det bästa av allt är att vi inte är knutna till något externt bibliotek så implementeringen är ganska enkel på vilken webbplats som helst, det återstår bara för alla att utöka exemplet och utföra funktionaliteten hos den jag skickar med hjälp av något programmeringsspråk, t.ex. PHP, Rubin, Pytonorm eller ens Node.js.
