Форма за контакт с CSS3

Един от най -важните раздели на всеки уебсайт е формата за контакт, която може да бъде толкова проста, колкото добавянето на няколко прости полета и бутон за изпращане на тази въведена информация, но винаги можем да отидем малко по -далеч и ако сме креативни, прилагаме формуляр за контакт, който не само изпълнява присъщата му функционалност, но и осигурява визуален и удобен за потребителя ефект.

Нека видим стъпките, които следва да се следват за прилагането на този формуляр, който ще симулира плик, който при задържане на курсора на мишката ще позволи на потребителя да попълни данните в рамките на това, което ще бъде буква, и всичко това с помощта на HTML Y CSS3.

Активи или ресурси


Първо трябва да имаме нашия плик, където ще отиде нашето писмо, за това ще използваме две различни изображения, едно от горната част на плика и друго отдолу, което в комбинация с преходите ще ни даде желания ефект.

Както виждаме, те изобщо не са сложни, но тези изображения са в хранилището, създадено за този пример, което ще намерите в края на урока в съответната връзка за изтегляне.

Конструкция на формуляра


Първо ще създадем HTML файл, който ще бъде извикан contact_form.html който ще съдържа нашата форма като такава и включването на .css файла, който ще отговаря за обработката на неговите стилове, както и за преходи, нека видим как изглежда:
 форма за контакти

Здрасти!

Съобщение:

Въведете вашите данни

Име: Имейл:
Сега просто трябва да създадем нашия .css наречен styles.css и там поставете стилове за нашата форма и използвайте преходите, за да генерирате желания ефект, първо ще променим малко външния вид на тялото си, за да му придадем вид на буква:
 body {фон: #ccc url ('img / bg_carta_fuera.png.webp'); цвят: # 7c7873; font-family: 'helvetica';} p {text-shadow: 0 1px 0 #fff; font-size: 24px;} # wrap {width: 530px; марж: 20px автоматично 0; височина: 1000px;} h1 {margin-bottom: 20px; text-align: center; font-size: 48px; text-shadow: 0 1px 0 # ede8d9; }
След като това стане, ще приложим преходите в div, който съдържа формата за това, която ще използваме преход в различните му варианти за всеки браузър и със стойността лекота навлизане Ще ви дадем ефект на бавен старт и край:
 #form_wrap {overflow: hidden; височина: 446px; позиция: относителна; отгоре: 0px; -webkit-преход: всички 1s облекчаване-in-out .3s; -moz-преход: всички 1s лесен за излизане .3s; -o-преход: всички 1s лесен за излизане .3s; преход: всички 1s лесен за излизане .3s;}
Сега с псевдоелементите преди Y despues de ще завършим ефекта на писмото, излизащо от плика, да видим:
 #form_wrap: before {content: ""; позиция: абсолютна; отдолу: 128px; отляво: 0px; фон: url ('img / before.png.webp'); width: 530px; height: 316px;} #form_wrap: after {content: ""; position: absolute; отдолу: 0px; отляво: 0; фон: url ('img / after.png.webp'); ширина: 530px; височина: 260px; }
И накрая, добавяме някои стилове към бутона за изпращане, за да контролираме както дисплея, така и ефектите върху него:
 #form_wrap input [type = submit] {position: relative; font-family: 'helvetica'; размер на шрифта: 24px; color: # 7c7873; text-shadow: 0 1px 0 #fff; ширина: 100%; подравняване на текст: център; непрозрачност: 0; фон: няма; курсор: показалец; -moz-border-radius: 3px; -webkit-border-radius: 3px; рамка-радиус: 3px; -webkit-преход: непрозрачност .6s лекота на излизане 0s; -moz-преход: непрозрачност .6s лекота на излизане 0s; -o-преход: непрозрачност .6s лекота на излизане 0s; преход: непрозрачност .6s лекота на излизане 0s; } #form_wrap: въведете курсора на мишката [type = submit] {z-index: 1; opacity: 1; -webkit-преход: непрозрачност .5s лекота на излизане 1.3s; -moz-преход: непрозрачност .5s лекота на излизане 1.3s; -o-преход: непрозрачност .5s лекота на излизане 1.3s; преход: непрозрачност .5s лекота на излизане 1.3s;}
Нека да видим как изглежда нашата първоначална форма за контакт, когато я стартираме в браузъра:

Увеличете

Ако задържим курсора на мишката върху него, ще видим функционалността, която формата се показва, за да може да въвежда данните и да изпраща:

Увеличете

Както виждаме, изграждането на тази форма беше доста просто и най -доброто от всичко е, че не сме обвързани с никаква външна библиотека, така че нейното внедряване е доста просто на всеки уебсайт, остава само на всеки да разшири примера и да изпълни функционалността на изпращам с помощта на някакъв език за програмиране, като например PHP, Руби, Python или дори Node.js.

wave wave wave wave wave