Модальна форма контактів на CSS3

0
300

Всім доброго часу доби!
Форма зворотнього зв’язку, або якщо по простому, контактна форма, це дуже важливий елемент будь-якого сайту, створеного для людей, і тим більше, вона важлива для блогів, де спочатку мається на увазі пряме спілкування з користувачами, за допомогою электроуной пошти.
Більшість веб-майстрів не особливо переймаються з приводу подачі контактних форм користувачеві. Найчастіше створюється окрема сторінка, на якій розміщують всю контактну інформацію, e-mail, телефон, скайп тощо, а так само стандартну форму зворотного зв’язку. Все це чудово, перевірено роками і прекрасно працює. Але адже не завжди і вже тим більше не всім потрібні докладні, розгорнуті, контактні реквізити адміністратора блогу, для зв’язку, користувачам досить мати перед очима, компактну форму відправлення повідомлення. Як це реалізувати? Дуже просто. Потрібно зробити форму контактів модальної, спливаючій на вимогу користувача, тобто надати чудову можливість вашим читачам надсилати повідомлення з будь-якої сторінки, або окремого запису сайту (блогу).

В інеті можна знайти досить подробнейших мануалів і прикладів реалізації даної задачі. Я теж якось присвятив цій темі кілька розгорнутих уроків.
У першому випадку «тынц», використовував модальний на jQuery, в якості контейнера для контактної форми, а у другому «тынц», зробив форму спливаючій з допомогою простенького javascript події onclick=”скрипт”.

Обидва варіанти відмінно справляються зі своїм завданням, але так як я ставлюся до прихильникам більш широкого використання нових стандартів CSS3 і Html5 (без фанатизму і в міру), вирішив об’єднати модальний і форму контактів в єдиний елемент, виключно засобами CSS3, без javascript і додаткових зображень в оформленні.
Що вийшло в результаті, можете подивитися на спеціально підготовленій демо-сторінці, а потім розберемо докладно, що і як робиться.

Дивитися Демо

Перш ніж приступимо до розбору всіх складових, звертаю увагу на те, що даний метод коректно працює у всіх сучасних браузерах: Chrome, Firefox, Opera, Safari, так само в Internet Explorer, починаючи з 9-ї версії, підтримується стабільна робота цього рішення.
Найцікавіше, на мій погляд, це те що, стандартно використовується структурована html форма контактів, прив’язана до сформованого в css, модального блоку. Навіть не так, сама форма наділена функціями модального вікна за допомогою css3.

HTML-Розмітка форми контактів

Для побудови форми, використовуємо тег з внутрішніми елементами . В конкретному прикладі, задіяв 4 основних поля будь, стандартної форми зворотного зв’язку, це: «Ім’я користувача», «Email», поле вводу з текстового повідомлення, і кнопка «Відправити» відповідно.

1
2
3
4
5
6

<form class="modal">
<input name="name placeholder="Вкажіть ваше ім'я:" class="name" required />
<input name="emailaddress" placeholder="Вкажіть ваш Email:" class="email" type="email" required />
<textarea rows="4" cols="50" name="subject" placeholder="Введіть ваше повідомлення:" class="message" required></textarea>
<input name="submit" class="btn" type="submit" value="Відправити" />
</form>

Як бачите, нічого незвичайного, форма як форма, хіба що для виводу тексту всередині полів, який зникає при отриманні фокусу, використовував атрибут placeholder. Однак у всіх браузерах текст зникає по різному, в одних при фокусі(IE 10+ і Safari), в інших при наявності хоча б одного введеного символу(Chrome і FireFox). Що б placeholder спрацьовував у всіх браузерах однаково, прописав спеціальні css правила:

1
2
3

:focus::-webkit-input-placeholder { color:transparent; }
:focus::-moz-placeholder { color:transparent; }
:focus::placeholder { color:transparent; }

:focus::-webkit-input-placeholder { color:transparent; }
:focus::-moz-placeholder { color:transparent; }
:focus::placeholder { color:transparent; }

Ось так, поступово, ми перейшли до формування стилів CSS, як самої форми, так і її внутрішніх елементів.

CSS3

Як писав вище, форма виконана в темних тонах, поля введення і кнопка виділені більш світлими відтінками. При оформленні використовував скруглення кутів, легку прозорість основного фону і градієнтну заливку для кнопки «відправити». За основу, з деякими поправками, враховуючи модальність майбутньої форми, був узятий набір правил і властивостей css, форми, про створення якої розповідав раніше. До речі, там же ви знайдете і опис форми в світлих тонах, а зробити її модальної вже не складе праці.

/** Базовий стиль форми **/
form {
overflow: hidden;
margin: 0 auto;
padding: 30px 30px 6px 30px;
min-width: 320px;
max-width: 520px;
width: 100%;
border: 1px solid rgba(120,120,120,.7);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgba(60, 63, 65, 0.9);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
}
/* загальні стилі для полів вводу */
textarea, input{
display:block;
margin-bottom:20px;
padding-right:20px;
padding-left:20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
color:#fff;
 font-weight: 300;
font-size:18px;
font-family: 'Open Sans', sans-serif;
}
/* поле текстового повідомлення */
textarea{
overflow:hidden;
width: 100%;
height: 110px;
border: 1px solid rgba(255,255,255,.6);
background: rgba(255, 255, 255, 0.4);
}
/* формуємо поля вводу */
input {
width: 100%;
height: 48px;
border: 1px solid rgba(255,255,255,.4);
}
input[type=submit] {
cursor:pointer;
}
input.name {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
input.email {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
input.message {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
::-webkit-input-placeholder {
color: #fff;
}
:-moz-placeholder{
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
/* поля вводу при фокусі */
input:focus, textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
overflow: hidden;
}
/* приховуємо текст полів вводу при фокусі */
:focus::-webkit-input-placeholder { color:transparent; }
:focus::-moz-placeholder { color:transparent; }
:focus::placeholder { color:transparent; }
/* Стилі для кнопки відправити */
.btn {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #253737;
 background: #416b68;
 background: -webkit-gradient(linear, left, top, left bottom, from(#6da5a3), to(#416b68));
 background: -webkit-linear-gradient(top, #6da5a3, #416b68);
 background: -moz-linear-gradient(top, #6da5a3, #416b68);
 background: -ms-linear-gradient(top, #6da5a3, #416b68);
 background: -o-linear-gradient(top, #6da5a3, #416b68);
 background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
 -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
color: #e1e1e1;
 outline: none;
}
.btn:hover {
border: 1px solid #253737;
 background: #416b68;
 background: -webkit-gradient(linear, left, top, left bottom, from(#77b2b0), to(#416b68));
 background: -webkit-linear-gradient(top, #77b2b0, #416b68);
 background: -moz-linear-gradient(top, #77b2b0, #416b68);
 background: -ms-linear-gradient(top, #77b2b0, #416b68);
 background: -o-linear-gradient(top, #77b2b0, #416b68);
 background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
 color: #fff;
 }
.btn:active {
margin-top:1px;
border: 1px solid #333333;
 background: #ffCC00;
 background: -webkit-gradient(linear, left, top, left bottom, from(#ffCC00), to(#ff6600));
 background: -webkit-linear-gradient(top, #ffcc00, #ff6600);
 background: -moz-linear-gradient(top, #ffcc00, #ff6600);
 background: -ms-linear-gradient(top, #ffcc00, #ff6600);
 background: -o-linear-gradient(top, #ffcc00, #ff6600);
 background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%);
 -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
color: #fff;
}
/* кінець форми */

/** Базовий стиль форми **/
form {
overflow: hidden;
margin: 0 auto;
padding: 30px 30px 6px 30px;
min-width: 320px;
max-width: 520px;
width: 100%;
border: 1px solid rgba(120,120,120,.7);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgba(60, 63, 65, 0.9);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
}
/* загальні стилі для полів вводу */
textarea, input{
display:block;
margin-bottom:20px;
padding-right:20px;
padding-left:20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
color:#fff;
font-weight: 300;
font-size:18px;
font-family: ‘Open Sans’, sans-serif;
}
/* поле текстового повідомлення */
textarea{
overflow:hidden;
width: 100%;
height: 110px;
border: 1px solid rgba(255,255,255,.6);
background: rgba(255, 255, 255, 0.4);
}
/* формуємо поля вводу */
input {
width: 100%;
height: 48px;
border: 1px solid rgba(255,255,255,.4);
}
input[type=submit] {
cursor:pointer;
}
input.name {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
input.email {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
input.message {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
::-webkit-input-placeholder {
color: #fff;
}
:-moz-placeholder{
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
/* поля вводу при фокусі */
input:focus, textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
overflow: hidden;
}
/* приховуємо текст полів вводу при фокусі */
:focus::-webkit-input-placeholder { color:transparent; }
:focus::-moz-placeholder { color:transparent; }
:focus::placeholder { color:transparent; }/* Стилі для кнопки відправити */
.btn {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #253737;
background: #416b68;
background: -webkit-gradient(linear, left, top, left bottom, from(#6da5a3), to(#416b68));
background: -webkit-linear-gradient(top, #6da5a3, #416b68);
background: -moz-linear-gradient(top, #6da5a3, #416b68);
background: -ms-linear-gradient(top, #6da5a3, #416b68);
background: -o-linear-gradient(top, #6da5a3, #416b68);
background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
color: #e1e1e1;
outline: none;
}
.btn:hover {
border: 1px solid #253737;
background: #416b68;
background: -webkit-gradient(linear, left, top, left bottom, from(#77b2b0), to(#416b68));
background: -webkit-linear-gradient(top, #77b2b0, #416b68);
background: -moz-linear-gradient(top, #77b2b0, #416b68);
background: -ms-linear-gradient(top, #77b2b0, #416b68);
background: -o-linear-gradient(top, #77b2b0, #416b68);
background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
color: #fff;
}
.btn:active {
margin-top:1px;
border: 1px solid #333333;
background: #ffCC00;
background: -webkit-gradient(linear, left, top, left bottom, from(#ffCC00), to(#ff6600));
background: -webkit-linear-gradient(top, #ffcc00, #ff6600);
background: -moz-linear-gradient(top, #ffcc00, #ff6600);
background: -ms-linear-gradient(top, #ffcc00, #ff6600);
background: -o-linear-gradient(top, #ffcc00, #ff6600);
background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%);
-webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
color: #fff;
}
/* кінець форми */

Стиль форми може бути абсолютно будь-який, а її модальність вирішується простим додаванням тегу певного класу, у прикладі, для наділення форми функцій спливаючого вікна, в теге прописуємо клас modal, з яким і будемо працювати в css.
Форма буде активуватися по кліку на певну посилання або кнопку, і з’являтися по центру сторінки не затемненому тлі. Фон затемнення виконуємо у вигляді посилання з класом overlay, для того щоб була можливість закриття модальної форми по кліку поза форми, так як кнопка закриття не передбачена у даному варіанті виконання, при бажанні прикрутити таку кнопку не складе праці. Ідентифікатор id=”form1″ зв’яже форму і шар затемнення з активним посиланням.

Посиланням відкриття модальної форми можуть бути будь-які елементи сторінки, меню, кнопки, текст або картинка, наприклад так:

<a href="#form1">Відкрити форму</a>

Відкрити форму

Шар затемнення у вигляді посилання розміщуєте безпосередньо перед формою, не принципово, а для того щоб все було розкладено по полицях», хаосу в коді html і без того досить, а виглядати це буде так:

<a href="#x" class="overlay" id="form1"></a>

Шар затемнення overlay і модальний блок пов’язуємо між собою безпосередньо в css, через псевдоклас :target, тобто активоване при кліці шар затемнення, тягне за собою блок .modal, до якого через однойменний клас, намертво прив’язана контактна форма. Це якщо по простому, без зайвої води і розпальцівки. До основних селекторам в css, прописав коментарі, сподіваюся це допоможе розібратися.

/** стилі затемнення фону */
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10000;
visibility: hidden;
/* фон затемнення */
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
position: fixed; /* фіксоване позиціонування */
/* трансформація прозорості при відкритті */
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
/** стилі модального блоку */
.modal {
top: 0;
right: 0;
left: 0;
width: 50%;
z-index: 10001;
/** повна прозорість спочатку */
opacity: 0;
display: block;
visibility: hidden;
position: absolute;
/* трансформація прозорості при відкритті */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
/* активація */
.overlay:target+.modal{
top: 25%;
visibility: visible;
opacity: 1;
}
/* планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.modal {
width: 95%;
}
}
/* смартфон */
@media only screen and (min-width: 459px) and (max-width: 767px) {
.modal {
width:85%;
}
}

/** стилі затемнення фону */
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10000;
visibility: hidden;
/* фон затемнення */
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
position: fixed; /* фіксоване позиціонування */
/* трансформація прозорості при відкритті */
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
/** стилі модального блоку */
.modal {
top: 0;
right: 0;
left: 0;
width: 50%;
z-index: 10001;
/** повна прозорість спочатку */
opacity: 0;
display: block;
visibility: hidden;
position: absolute;
/* трансформація прозорості при відкритті */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
/* активація */
.overlay:target+.modal{
top: 25%;
visibility: visible;
opacity: 1;
}
/* планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.modal {
width: 95%;
}
}
/* смартфон */
@media only screen and (min-width: 459px) and (max-width: 767px) {
.modal {
width:85%;
}
}

Всі компоненти необхідні для роботи екранної форми зворотного зв’язку готові, залишається лише підключити їх до документа html, це може бути будь-яка сторінка вашого сайту.
1. Посилання виклику форми. Вибираєте потрібний вам елемент (кнопка, картинка або пункт меню) і оборачиваете його посиланням:

<a href="#form1">Відкрити форму</a>

Відкрити форму

2. Форма на тлі затемнення. У будь-яке місце html-сторінка, головне в межах тегів …., ставите ось таку конструкцію(обернув коментарями):


<a href="#x" class="overlay" id="form1"></a>
<form class="modal">
<input name="name placeholder="Вкажіть ваше ім'я:" class="name" required />
<input name="emailaddress" placeholder="Вкажіть ваш Email:" class="email" type="email" required />
<textarea rows="4" cols="50" name="subject" placeholder="Введіть ваше повідомлення:" class="message" required></textarea>
<input name="submit" class="btn" type="submit" value="Відправити" />
</form>

3. CSS форми. Всі стилі упаковані і винесені в окремий файл style-form.css. Ви можете підключити його до документа, прописавши в розділі … або ж скопіювати весь вміст вбудувати в основну таблицю стилів вашого сайту.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202

*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* базовий стиль форми */
form {
overflow: hidden;
margin: 0 auto;
padding: 30px 30px 6px 30px;
min-width: 320px;
max-width: 520px;
width: 100%;
border: 1px solid rgba(120,120,120,.7);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgba(60, 63, 65, 0.9);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
}
/*загальні стилі полів вводу*/
textarea, input{
display:block;
margin-bottom:20px;
padding-right:20px;
padding-left:20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
color:#fff;
 font-weight: 300;
font-size:18px;
font-family: 'Open Sans', sans-serif;
}
/* поле повідомлення */
textarea{
overflow:hidden;
width: 100%;
height: 110px;
border: 1px solid rgba(255,255,255,.6);
background: rgba(255, 255, 255, 0.4);
}
/* поля вводу */
input {
width: 100%;
height: 48px;
border: 1px solid rgba(255,255,255,.4);
}
input[type=submit] {
cursor:pointer;
}
input.name {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
input.email {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
input.message {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
::-webkit-input-placeholder {
color: #fff;
}
:-moz-placeholder{
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
input:focus, textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
overflow: hidden;
}
:focus::-webkit-input-placeholder { color:transparent; }
:focus::-moz-placeholder { color:transparent; }
:focus::placeholder { color:transparent; }
/* Стилі для кнопки відправити */
.btn {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #253737;
 background: #416b68;
 background: -webkit-gradient(linear, left, top, left bottom, from(#6da5a3), to(#416b68));
 background: -webkit-linear-gradient(top, #6da5a3, #416b68);
 background: -moz-linear-gradient(top, #6da5a3, #416b68);
 background: -ms-linear-gradient(top, #6da5a3, #416b68);
 background: -o-linear-gradient(top, #6da5a3, #416b68);
 background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
 -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
color: #e1e1e1;
 outline: none;
}
.btn:hover {
border: 1px solid #253737;
 background: #416b68;
 background: -webkit-gradient(linear, left, top, left bottom, from(#77b2b0), to(#416b68));
 background: -webkit-linear-gradient(top, #77b2b0, #416b68);
 background: -moz-linear-gradient(top, #77b2b0, #416b68);
 background: -ms-linear-gradient(top, #77b2b0, #416b68);
 background: -o-linear-gradient(top, #77b2b0, #416b68);
 background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
 color: #fff;
 }
.btn:active {
margin-top:1px;
border: 1px solid #333333;
 background: #ffCC00;
 background: -webkit-gradient(linear, left, top, left bottom, from(#ffCC00), to(#ff6600));
 background: -webkit-linear-gradient(top, #ffcc00, #ff6600);
 background: -moz-linear-gradient(top, #ffcc00, #ff6600);
 background: -ms-linear-gradient(top, #ffcc00, #ff6600);
 background: -o-linear-gradient(top, #ffcc00, #ff6600);
 background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%);
 -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
color: #fff;
}
/* кінець форми */
/** стилі затемнення фону */
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10000;
visibility: hidden;
/* фон затемнення */
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
position: fixed; /* фіксоване позиціонування */
/* трансформація прозорості при відкритті */
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
/** стилі модального блоку */
.modal {
top: 0;
right: 0;
left: 0;
width: 50%;
z-index: 10001;
/** повна прозорість спочатку */
opacity: 0;
display: block;
visibility: hidden;
position: absolute;
/* трансформація прозорості при відкритті */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.overlay:target+.modal{
top: 25%;
visibility: visible;
opacity: 1;
}
/* планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.modal {
width: 95%;
}
}
/* мобільний */
@media only screen and (min-width: 459px) and (max-width: 767px) {
.modal {
width:85%;
}
}

*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}/* базовий стиль форми */
form {
overflow: hidden;
margin: 0 auto;
padding: 30px 30px 6px 30px;
min-width: 320px;
max-width: 520px;
width: 100%;
border: 1px solid rgba(120,120,120,.7);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgba(60, 63, 65, 0.9);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
}
/*загальні стилі полів вводу*/
textarea, input{
display:block;
margin-bottom:20px;
padding-right:20px;
padding-left:20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
color:#fff;
font-weight: 300;
font-size:18px;
font-family: ‘Open Sans’, sans-serif;
}
/* поле повідомлення */
textarea{
overflow:hidden;
width: 100%;
height: 110px;
border: 1px solid rgba(255,255,255,.6);
background: rgba(255, 255, 255, 0.4);
}
/* поля вводу */
input {
width: 100%;
height: 48px;
border: 1px solid rgba(255,255,255,.4);
}
input[type=submit] {
cursor:pointer;
}
input.name {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
input.email {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
input.message {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
::-webkit-input-placeholder {
color: #fff;
}
:-moz-placeholder{
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
input:focus, textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
overflow: hidden;
}
:focus::-webkit-input-placeholder { color:transparent; }
:focus::-moz-placeholder { color:transparent; }
:focus::placeholder { color:transparent; }/* Стилі для кнопки відправити */
.btn {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #253737;
background: #416b68;
background: -webkit-gradient(linear, left, top, left bottom, from(#6da5a3), to(#416b68));
background: -webkit-linear-gradient(top, #6da5a3, #416b68);
background: -moz-linear-gradient(top, #6da5a3, #416b68);
background: -ms-linear-gradient(top, #6da5a3, #416b68);
background: -o-linear-gradient(top, #6da5a3, #416b68);
background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
color: #e1e1e1;
outline: none;
}
.btn:hover {
border: 1px solid #253737;
background: #416b68;
background: -webkit-gradient(linear, left, top, left bottom, from(#77b2b0), to(#416b68));
background: -webkit-linear-gradient(top, #77b2b0, #416b68);
background: -moz-linear-gradient(top, #77b2b0, #416b68);
background: -ms-linear-gradient(top, #77b2b0, #416b68);
background: -o-linear-gradient(top, #77b2b0, #416b68);
background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
color: #fff;
}
.btn:active {
margin-top:1px;
border: 1px solid #333333;
background: #ffCC00;
background: -webkit-gradient(linear, left, top, left bottom, from(#ffCC00), to(#ff6600));
background: -webkit-linear-gradient(top, #ffcc00, #ff6600);
background: -moz-linear-gradient(top, #ffcc00, #ff6600);
background: -ms-linear-gradient(top, #ffcc00, #ff6600);
background: -o-linear-gradient(top, #ffcc00, #ff6600);
background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%);
-webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
color: #fff;
}
/* кінець форми *//** стилі затемнення фону */
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10000;
visibility: hidden;
/* фон затемнення */
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
position: fixed; /* фіксоване позиціонування */
/* трансформація прозорості при відкритті */
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
/** стилі модального блоку */
.modal {
top: 0;
right: 0;
left: 0;
width: 50%;
z-index: 10001;
/** повна прозорість спочатку */
opacity: 0;
display: block;
visibility: hidden;
position: absolute;
/* трансформація прозорості при відкритті */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.overlay:target+.modal{
top: 25%;
visibility: visible;
opacity: 1;
}
/* планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.modal {
width: 95%;
}
}
/* мобільний */
@media only screen and (min-width: 459px) and (max-width: 767px) {
.modal {
width:85%;
}
}

Ось тепер точно все! Ще раз подивіться живий приклад і якщо воно вам дуже треба, скачивайте архів з исходниками, експериментуйте, і творіть, творіть, творіть…

ДемоСкачать

ЗИ: У формі працює required, при неправильному заповненні полів, видається попередження))).

З Повагою, Андрій .

Буду всім вдячний, якщо поділитеся посиланням на запис в своїх соціальних мережах:

СТАТТІ ПО ТЕМІБІЛЬШЕ ВІД АВТОРА