Een van de belangrijkste onderdelen van elke website is het contactformulier, dat zo simpel kan zijn als het toevoegen van een paar eenvoudige velden en een knop om deze ingevoerde informatie te verzenden, maar we kunnen altijd een beetje verder gaan en als we creatief zijn, een contactformulier dat niet alleen zijn inherente functionaliteit vervult, maar ook een visueel en gebruiksvriendelijk effect heeft.
Laten we eens kijken naar de stappen die moeten worden gevolgd voor de implementatie van dit formulier dat een envelop zal simuleren die de gebruiker bij het zweven van de muiscursor in staat zal stellen de gegevens in te vullen binnen wat een letter zal zijn, en dit alles met het gebruik van HTML Y CSS3.
Activa of middelen
Eerst moeten we onze envelop hebben waar onze brief naartoe zal gaan, hiervoor zullen we twee verschillende afbeeldingen gebruiken, een van de bovenkant van de envelop en een andere van de onderkant, wat in combinatie met de overgangen ons het gewenste effect zal geven.
Zoals we kunnen zien, zijn ze helemaal niet ingewikkeld, maar deze afbeeldingen bevinden zich in de repository die voor dit voorbeeld is gemaakt en die u aan het einde van de tutorial vindt in de bijbehorende link om te downloaden.
Vorm constructie
We zullen eerst een HTML-bestand maken met de naam contact_form.html die ons formulier als zodanig zal bevatten en de opname van het .css-bestand dat verantwoordelijk is voor het afhandelen van de stijlen en overgangen, laten we eens kijken hoe het eruit ziet:
Contact FormulierNu hoeven we alleen onze .css genaamd . te maken stijlen.css en daar stijlen voor onze vorm plaatsen en de overgangen gebruiken om het gewenste effect te genereren, eerst zullen we het uiterlijk van ons lichaam een beetje veranderen om het op een letter te laten lijken:Hoi!
Bericht:Vul je gegevens in
Naam: E-mail:
body {achtergrond: #ccc url ('img / bg_carta_fuera.png.webp'); kleur: # 7c7873; font-family: 'helvetica';} p {text-shadow: 0 1px 0 #fff; lettergrootte: 24px;} # wrap {breedte: 530px; marge: 20px auto 0; hoogte: 1000px;} h1 {marge-bodem: 20px; tekstuitlijning: midden; lettergrootte: 48px; tekstschaduw: 0 1px 0 # ede8d9; }Zodra dit is gebeurd, gaan we de overgangen implementeren in de div die het formulier bevat dat we hiervoor zullen gebruiken overgang in zijn verschillende varianten voor elke browser en met de waarde gemak-in-uit We geven je het effect van een langzame start en een einde:
#form_wrap {overloop: verborgen; hoogte: 446px; positie: relatief; boven: 0px; -webkit-overgang: alle 1s gemak-in-out .3s; -moz-overgang: alle 1s gemak-in-out .3s; -o-overgang: alle 1s gemak-in-out .3s; overgang: alle 1s gemak-in-out .3s;}Nu met de pseudo-elementen voordat Y despues de we zullen het effect van de brief die uit de envelop komt, voltooien, laten we eens kijken:
#form_wrap: voor {content: ""; positie: absoluut; onder: 128px; links: 0px; achtergrond: url ('img / before.png.webp'); breedte: 530px; hoogte: 316px;} #form_wrap: na {content: ""; positie: absoluut; onder: 0px; links: 0; achtergrond: url ('img / after.png.webp'); breedte: 530px;hoogte: 260px; }Ten slotte voegen we enkele stijlen toe aan de verzendknop om zowel de weergave als de effecten erop te regelen:
#form_wrap input [type = submit] {positie: relatief; font-familie: 'helvetica'; lettergrootte: 24px; kleur: # 7c7873; tekstschaduw: 0 1px 0 #fff; breedte: 100%; tekstuitlijning: midden, dekking: 0; achtergrond: geen; cursor: aanwijzer; -moz-grens-radius: 3px; -webkit-grens-radius: 3px; grens-radius: 3px; -webkit-overgang: dekking .6s gemak-in-uit 0s; -moz-overgang: dekking .6s gemak-in-uit 0s; -o-overgang: dekking .6s gemak-in-out 0s; overgang: dekking .6s gemak-in-uit 0s; } #form_wrap: hover input [type = submit] {z-index: 1; dekking: 1; -webkit-overgang: dekking .5s gemak-in-out 1.3s; -moz-overgang: dekking .5s gemak-in-out 1.3s; -o-overgang: dekking .5s gemak-in-out 1.3s; overgang: dekking .5s gemak-in-out 1.3s;}Laten we dus eens kijken hoe ons eerste contactformulier eruitziet wanneer we het in de browser uitvoeren:
VERGROTEN
Als we er met de muiscursor overheen gaan, zien we de functionaliteit die het formulier toont om de gegevens in te voeren en te verzenden:
VERGROTEN
Zoals we kunnen zien, was de constructie van dit formulier vrij eenvoudig en het beste van alles is dat we niet gebonden zijn aan een externe bibliotheek, dus de implementatie ervan is vrij eenvoudig op elke website, het blijft alleen voor iedereen om het voorbeeld uit te breiden en de functionaliteit van de ik verzend met behulp van een programmeertaal, zoals: PHP, Robijn, Python of zelfs Node.js.
