Всім доброго часу доби!
Форма зворотнього зв’язку, або якщо по простому, контактна форма, це дуже важливий елемент будь-якого сайту, створеного для людей, і тим більше, вона важлива для блогів, де спочатку мається на увазі пряме спілкування з користувачами, за допомогою электроуной пошти.
Більшість веб-майстрів не особливо переймаються з приводу подачі контактних форм користувачеві. Найчастіше створюється окрема сторінка, на якій розміщують всю контактну інформацію, 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, при неправильному заповненні полів, видається попередження))).
З Повагою, Андрій .
Буду всім вдячний, якщо поділитеся посиланням на запис в своїх соціальних мережах: