Formular de contact cu CSS3

Una dintre cele mai importante secțiuni ale oricărui site web este formularul de contact, care poate fi la fel de simplu ca adăugarea câtorva câmpuri simple și un buton pentru a trimite aceste informații introduse, dar putem merge întotdeauna puțin mai departe și dacă suntem creativi, implementăm un formular de contact care nu numai că își îndeplinește funcționalitatea inerentă, dar oferă și un efect vizual și ușor de utilizat.

Să vedem pașii care trebuie urmați pentru punerea în aplicare a acestui formular care va simula un plic care, atunci când plasați cursorul mouse-ului, va permite utilizatorului să completeze datele în ceea ce va fi o literă și toate acestea cu utilizarea HTML Da CSS3.

Active sau resurse

Mai întâi trebuie să avem plicul unde va merge scrisoarea noastră, pentru aceasta vom folosi două imagini diferite, una din partea de sus a plicului și alta din partea de jos, care combinate cu tranzițiile ne vor da efectul dorit.

După cum putem vedea, acestea nu sunt deloc complicate, cu toate acestea, aceste imagini se află în depozitul creat pentru acest exemplu pe care îl veți găsi la sfârșitul tutorialului în linkul corespunzător pentru descărcare.

Construcția formei

Mai întâi vom crea un fișier HTML care va fi numit contact_form.html care va conține formularul nostru ca atare și includerea fișierului .css care se va ocupa de gestionarea stilurilor sale, precum și a tranzițiilor, să vedem cum arată:

 Formular de contact
Bună!
Mesaj:
Introduceți datele dvs.
Nume: Email:

Acum trebuie doar să creăm .css-ul nostru numit stiluri.css și acolo plasăm stiluri pentru forma noastră și folosim tranzițiile pentru a genera efectul dorit, mai întâi vom schimba puțin aspectul corpului nostru pentru a-i da aspectul unei litere:

 body {background: #ccc url ('img / bg_carta_fuera.png.webp'); culoare: # 7c7873; font-family: 'helvetica';} p {text-shadow: 0 1px 0 #fff; font-size: 24px;} # wrap {width: 530px; margine: 20px auto 0; înălțime: 1000px;} h1 {margin-jos: 20px; text-align: center; font-size: 48px; text-shadow: 0 1px 0 # ede8d9; }

Odată ce acest lucru este făcut, vom implementa tranzițiile în div care conține formularul pentru care îl vom folosi tranziție în diferitele sale variante pentru fiecare browser și cu valoarea ușurință-în-ieșire Vă vom oferi efectul unui început lent și a unui sfârșit:

 #form_wrap {overflow: ascuns; înălțime: 446px; poziție: relativă; sus: 0px; -webkit-tranziție: toate 1s ușurință-în-ieșire .3s; -moz-tranziție: toate 1s ușurință-în-ieșire .3s; -o-tranziție: toate 1s ușurință-în-ieșire .3s; tranziție: toate 1s ușurință-în-ieșire .3s;}

Acum cu pseudoelementele inainte de Da despues de vom completa efectul scrisorii care iese din plic, să vedem:

 #form_wrap: înainte de {content: ""; poziție: absolută; partea de jos: 128 px; stânga: 0 px; fundal: url ('img / before.png.webp'); width: 530px; height: 316px;} #form_wrap: after {content: ""; position: absolute; jos: 0px; stânga: 0; fundal: url ('img / after.png.webp'); lățime: 530px; înălțime: 260px; }

În cele din urmă, adăugăm câteva stiluri la butonul de trimitere pentru a controla atât afișajul, cât și efectele asupra acestuia:

 #form_wrap input [type = submit] {position: relative; font-family: 'helvetica'; dimensiunea fontului: 24px; culoare: # 7c7873; text-shadow: 0 1px 0 #fff; lățime: 100%; text-align: centru; opacitate: 0; fundal: nici unul; cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; raza chenarului: 3px; -webkit-transition: opacitate .6s ușurință-în-ieșire 0; -moz-tranziție: opacitate .6s ușurință-în-ieșire 0; -o-tranziție: opacitate .6s ușurință-în-ieșire 0s; tranziție: opacitate .6s ușurință-în-ieșire 0; } #form_wrap: hover input [type = submit] {z-index: 1; opacity: 1; -webkit-tranziție: opacitate .5s ușurință-în-ieșire 1.3s; -moz-tranziție: opacitate .5s ușurință-în-ieșire 1.3s; -o-tranziție: opacitate .5s ușurință-în-ieșire 1.3s; tranziție: opacitate .5s ușor de intrat 1.3s;}

Deci, să vedem cum arată formularul nostru de contact inițial atunci când îl rulăm în browser:

MARI

Dacă trecem cursorul mouse-ului peste el, vom vedea funcționalitatea pe care se afișează formularul pentru a putea introduce datele și trimite:

MARI

După cum putem vedea, construirea acestui formular a fost destul de simplă și cel mai bun dintre toate este că nu suntem legați de nicio bibliotecă externă, astfel încât implementarea sa este destul de simplă pe orice site web, rămâne doar pentru toată lumea să extindă exemplul și să efectueze funcționalitatea pe care o trimit folosind un anumit limbaj de programare, cum ar fi PHP, Rubin, Piton sau chiar Node.js.