с обтеканием и теперь разметка будет такой:
Обратная связь
В коде видно, что используются возможности HTML5, такие как тип поля email , атрибуты placeholder и required (они позволяют обойтись без валидации формы на JS) — их мы рассмотрим чуть позже. Для старых браузеров мы позволим частичное graceful degradation, например опустим текстовые подсказки в полях (хотя их можно реализовать с помощью jQuery и плагинов), а проверку введенных данных сделаем с помощью JS и PHP. Для поддержки IE ниже 9-ой версий CSS3 свойств подключим скрипт PIE .
Валидация формы на HTML5
Давайте добавим валидацию нашей формочке. С HTML5 реализовать это достаточно просто, поэтому рассмотрим именно этот вариант.
Например, сделаем поле обязательным для заполнения.
Как видите, был добавлен всего лишь один атрибут required . Теперь при попытке отправки формы с пустым полем появится уведомление:
Внешний вид сообщения различается в браузерах и к сожалению не изменяется.
Также для поля ввода электронной почты мы можем указать тип email:
Это означает, что в данном поле подразумевается именно электронный адрес и элемент получит соответствующую валидацию. Наглядно продемонстрировано на скриншоте:
Аналогичная ситуация с полями url , date и number:
Все очень легко, без скриптов на JS/PHP.
Валидация в HTML5 работает по умолчанию, но ее возможно и отключить — добавим элементу
атрибут novalidate:
...
Особенности верстки элементов формы
textarea
В браузерах на движке webkit можно изменять размер , что бывает довольно удобно. Но очень часто это свойство ломает дизайн, поэтому приходится применять свойство resize: none для запрета изменения размера. Также возможно разрешить полю растягиваться только по горизонтали или вертикали. (для Safari и Chrome)
IE для добавляет полосу прокрутки, чтобы ее убрать, необходимо прописать overflow: auto .
Подсветка полей в браузерах Chrome, Safari
При фокусе на полях в браузерах Chrome, Safari они начинают подсвечиваться. Чтобы убрать эту подсветку, нужно прописать такой CSS-код:
Input, textarea {
outline: none;
}
Пунктирная рамка в Firefox
FF при фокусе на некоторые поля выделяет их пунктирной рамкой, что смотрится не всегда красиво. Для того чтобы их убрать, напишем такие стили:
Button::-moz-focus-inner,
input::-moz-focus-inner,
input::-moz-focus-inner,
input::-moz-focus-inner {
border: none;
}
Конечно желательно заменить отсутствие пунктирной рамки другим эквивалентом — для удобства пользователя.
Убираем кнопку очистки текста и отображения пароля в IE10
IE10 по умолчанию для текстовых полей добавляет кнопку очистки текста, а для полей ввода пароля — кнопку отображения пароля. Обе эти функции очень полезны, однако иногда могут портить задумку дизайнера. К счастью, убрать их очень легко, этот небольшой сниппет избавит вас от данной особенности браузера:
::-ms-clear {
display: none;
}
Нестандартные элементы форм
Стилизация элементов форм рассмотрена в отдельных статьях.
Форма обратной связи, или если по другому, один из самых важных элементов любого сайта. И конечно же, как и все другие элементы пользовательского интерфейса, контактные , должны быть как-то внешне стилизованы и оформлены, дабы привлечь внимание пользователей и расположить к общению. Предлагаю на ваше обозрение парочку вариантов стилей форм обратной связи, исключительно средствами 3, без использования дополнительных изображений в оформлении. Ничего лишнего, лишь короткие фрагменты кода (сниппеты) для контактных форм, выполненных в светлых и тёмных тонах.
1. Контактная форма в тёмных тонах В зависимости от цвета основного фона страницы, визуально будет меняться базовый цвет фона самой формы. Размер формы зависит от размеров контейнера, в котором форма будет расположена.
Html каркас формы стандартный, необходимые поля ввода и кнопка «Отправить», для связки с CSS, каждому элементу формы присвоен определённый класс, ничего сложного, разобраться будет нетрудно.
<
form>
<
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>
CSS По стилям особо расписывать ничего не буду, отмечу лишь одно, в оформлении использовал некоторые свойства CSS3, линейный градиент, эффект тени, слегка скруглённые углы и т.д., постарался добиться некой кроссбраузерности для этих свойств, но в старых версиях браузеров, форма будет выглядеть всё же несколько иначе ((.
/* Базовый стиль формы */
form {
margin:
0
auto;
max-
width:
95
%;
padding:
30px 30px 6px 30px;
border:
1px solid rgba(0
,
0
,
0
,
.2
)
;
-
moz-
border-
radius:
5px;
-
webkit-
border-
radius:
5px;
border-
radius:
5px;
-
moz-
background-
clip:
padding;
-
webkit-
background-
clip:
padding-
box;
background-
clip:
padding-
box;
background:
rgba(0
,
0
,
0
,
0.5
)
;
-
moz-
box-
shadow:
0
0
13px 3px rgba(0
,
0
,
0
,
.5
)
;
-
webkit-
box-
shadow:
0
0
13px 3px rgba(0
,
0
,
0
,
.5
)
;
box-
shadow:
0
0
13px 3px rgba(0
,
0
,
0
,
.5
)
;
overflow:
hidden;
}
/* Поле сообщения */
textarea{
background:
rgba(255
,
255
,
255
,
0.4
)
;
width:
100
%;
height:
110px;
border:
1px solid rgba(255
,
255
,
255
,
.6
)
;
-
moz-
border-
radius:
4px;
-
webkit-
border-
radius:
4px;
border-
radius:
4px;
-
moz-
background-
clip:
padding;
-
webkit-
background-
clip:
padding-
box;
background-
clip:
padding-
box;
display:
block;
font-
family:
"Open Sans"
,
sans-
serif;
font-
size:
18px;
font-
weight:
300
;
color:
#fff;
padding-
left:
25px;
padding-
right:
20px;
padding-
top:
12px;
margin-
bottom:
20px;
overflow:
hidden;
}
/* Поля ввода */
input {
width:
100
%;
height:
48px;
border:
1px solid rgba(255
,
255
,
255
,
.4
)
;
-
moz-
border-
radius:
4px;
-
webkit-
border-
radius:
4px;
border-
radius:
4px;
-
moz-
background-
clip:
padding;
-
webkit-
background-
clip:
padding-
box;
background-
clip:
padding-
box;
display:
block;
font-
family:
"Open Sans"
,
sans-
serif;
font-
size:
18px;
font-
weight:
300
;
color:
#fff;
padding-
left:
20px;
padding-
right:
20px;
margin-
bottom:
20px;
}
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;
}
/* Стили для кнопки отправить */
.
btn {
width:
138px;
height:
44px;
-
moz-
border-
radius:
4px;
-
webkit-
border-
radius:
4px;
border-
radius:
4px;
float:
right;
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%);
padding:
10.
5px 21px;
-
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
;
text-
shadow:
#333333 0 1px 0;
color:
#e1e1e1;
}
.
btn:
hover {
border:
1px solid #253737;
text-
shadow:
#333333 0 1px 0;
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;
text-
shadow:
#333333 0 -1px 0;
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%);
color:
#fff;
-
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
;
outline:
none;
}
/* Базовый стиль формы */
form {
margin: 0 auto;
max-width: 95%;
padding: 30px 30px 6px 30px;
border: 1px solid rgba(0,0,0,.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}
/* Поле сообщения */
textarea{
background: rgba(255, 255, 255, 0.4);
width: 100%;
height: 110px;
border: 1px solid rgba(255,255,255,.6);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display:block;
font-family: "Open Sans", sans-serif;
font-size:18px;
font-weight: 300;
color:#fff;
padding-left:25px;
padding-right:20px;
padding-top:12px;
margin-bottom:20px;
overflow:hidden;
}
/* Поля ввода */
input {
width: 100%;
height: 48px;
border: 1px solid rgba(255,255,255,.4);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display:block;
font-family: "Open Sans", sans-serif;
font-size:18px;
font-weight: 300;
color:#fff;
padding-left:20px;
padding-right:20px;
margin-bottom:20px;
}
input {
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;
}
/* Стили для кнопки отправить */
.btn {
width: 138px;
height: 44px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
float:right;
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%);
padding: 10.5px 21px;
-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;
text-shadow: #333333 0 1px 0;
color: #e1e1e1;
}
.btn:hover {
border: 1px solid #253737;
text-shadow: #333333 0 1px 0;
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;
text-shadow: #333333 0 -1px 0;
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%);
color: #fff;
-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;
outline: none;
}
Может и это вам будет интересно: 2. Контактная форма в светлых тонах Второй вариант оформления формы обратной связи представлен в светлых тонах, размеры формы (ширина, высота), как и в первом варианте не фиксированы, и легко будут вписываться в размеры контейнера где эта формы будет расположена.
HTML Как и в первом варианте, структура Html контактной формы стандартная, элементы формы с определёнными классами, соответствующими классам в CSS.
<
form>
<
input name=
"name"
placeholder=
"Укажите ваше имя!"
class
=
"textbox"
required />
<
input name=
"emailaddress"
placeholder=
"Укажите ваш Email!"
class
=
"textbox"
type=
"email"
required />
<
textarea rows=
"4"
cols=
"50"
name=
"subject"
placeholder=
"Введите ваше сообщение:"
class
=
"message"
required>
textarea>
<
input name=
"submit"
class
=
"button"
type=
"submit"
value=
"Отправить"
/>
form>
CSS При формировании базовых размеров форм и внутренних элементов, использовал процентные значения для ширины width , благодаря чему, форма легко подстраивается под размеры контейнера в котором она будет расположена. Цветовая гамма кнопки «Отправить», её размеры и расположения, легко меняются, достаточно поэкспериментировать с определёнными значениями.
/* Базовые стили формы */
form{
margin:
0
auto;
max-
width:
95
%;
box-
sizing:
border-
box;
padding:
40px;
border-
radius:
5px;
background:
RGBA(255
,
255
,
255
,
1
)
;
-
webkit-
box-
shadow:
0px 0px 15px 0px rgba(0
,
0
,
0
,
.45
)
;
box-
shadow:
0px 0px 15px 0px rgba(0
,
0
,
0
,
.45
)
;
}
/* Стили полей ввода */
.
textbox{
height:
50px;
width:
100
%;
border-
radius:
3px;
border:
rgba(0
,
0
,
0
,
.3
)
2px solid;
box-
sizing:
border-
box;
font-
family:
"Open Sans"
,
sans-
serif;
font-
size:
18px;
padding:
10px;
margin-
bottom:
30px;
}
.
message:
focus,
.
textbox:
focus{
outline:
none;
border:
rgba( 24
,
149
,
215
,
1
)
2px solid;
color:
rgba( 24
,
149
,
215
,
1
)
;
}
/* Стили текстового поля */
.
message{
background:
rgba( 255
,
255
,
255
,
0.4
)
;
width:
100
%;
height:
120px;
border:
rgba( 0
,
0
,
0
,
.3
)
2px solid;
box-
sizing:
border-
box;
-
moz-
border-
radius:
3px;
font-
size:
18px;
font-
family:
"Open Sans"
,
sans-
serif;
-
webkit-
border-
radius:
3px;
border-
radius:
3px;
display:
block;
padding:
10px;
margin-
bottom:
30px;
overflow:
hidden;
}
/* Базовые стили кнопки */
.
button{
height:
50px;
width:
100
%;
border-
radius:
3px;
border:
rgba( 0
,
0
,
0
,
.3
)
0px solid;
box-
sizing:
border-
box;
padding:
10px;
background:
#90c843;
color:
#FFF;
font-
family:
"Open Sans"
,
sans-
serif;
font-
weight:
400
;
font-
size:
16pt;
transition:
background .
4s;
cursor:
pointer;
}
/* Изменение фона кнопки при наведении */
.
button:
hover{
background:
#80b438;
}
/* Базовые стили формы */
form{
margin:0 auto;
max-width:95%;
box-sizing:border-box;
padding:40px;
border-radius:5px;
background:RGBA(255,255,255,1);
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45);
}
/* Стили полей ввода */
.textbox{
height:50px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 2px solid;
box-sizing:border-box;
font-family: "Open Sans", sans-serif;
font-size:18px;
padding:10px;
margin-bottom:30px;
}
.message:focus,
.textbox:focus{
outline:none;
border:rgba(24,149,215,1) 2px solid;
color:rgba(24,149,215,1);
}
/* Стили текстового поля */
.message{
background: rgba(255, 255, 255, 0.4);
width:100%;
height: 120px;
border:rgba(0,0,0,.3) 2px solid;
box-sizing:border-box;
-moz-border-radius: 3px;
font-size:18px;
font-family: "Open Sans", sans-serif;
-webkit-border-radius: 3px;
border-radius: 3px;
display:block;
padding:10px;
margin-bottom:30px;
overflow:hidden;
}
/* Базовые стили кнопки */
.button{
height:50px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 0px solid;
box-sizing:border-box;
padding:10px;
background:#90c843;
color:#FFF;
font-family: "Open Sans", sans-serif;
font-weight:400;
font-size: 16pt;
transition:background .4s;
cursor:pointer;
}
/* Изменение фона кнопки при наведении */
.button:hover{
background:#80b438;
}
Вариантов оформления контактных форм масса, главное иметь чуточку фантазии и базовые знания CSS. На страницах моего блога, вы можете найти другие, и примеры стилистики форм обратной связи. Для особо невнимательных, хочу, в который уже раз, пояснить: представленные в статье формы, это всего лишь внешняя оболочка, чтобы формы реально выполняли свои функции, к ним необходимо прикрутить скрипт-обработчик, коих полно разбросано в «интернетах», так что убедительная просьба, не писать в комментариях, что формы не работают и т.п., всё прекрасно работает, просто нужно понимать что, куда и зачем))).
С уважением, Андрей.
В этой небольшой заметке я покажу вам, как шаг за шагом создать красивую контактную форму на чистом CSS без использования изображений. Форма будет иметь поля со следующими данными: имя, адрес электронной почты, URL-адрес, тема и текст сообщения. Для кроссбраузерности мы воспользуемся вендорными префиксами, однако, для сокращения кода, здесь мы рассмотрим верстку без них. .
Создаем форму на HTML Вот так будет выглядеть наша форма обратной связи
Для начала немного пояснений к форме.
Input type = email используется для обозначения поля где пользователь может ввести адрес электронной почты. Браузеры, которые поддерживают этот тип поля смогут определить, ввел ли пользователь корректный адрес электронной почты или нет. Input type = url используется для проверки ввода правильного или допустимого URL-адреса. Require = required определяет состояние элемента формы, как требуется. Браузеры, которые поддерживают этот атрибут, блокируют отправку формы, до тех пор, пока все обязательные поля не будут заполнены. Placeholder этот атрибут представляет собой подсказку, чтобы пользователь знал, что и в каком формате вводить данные. Заполнитель исчезает при нажатии на поле.
Создание полосатого фона Для создания эффекта почтового конверта, начнем с заливки фона полосатым градиентом.
#content{
position:relative;
margin:50px auto;
width:400px;
min-height:200px;
z-index:100;
padding:30px;
border:1px solid #383838;
background: #D1D1D1;
/* My stripped background */
background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px);
border-radius:8px;
box-shadow:0px 1px 6px #3F3F3F;
}
Свойство repeating-linear-gradient позволяет создать бесконечно повторяемый линейный градиент. Сначала мы наклонили полосы на угол в 45 градусов, а затем последовательно раскрасили полосы и задали им ширину в пикселах. Теперь у нас есть градиентный фон. Осталось добавить светло серый фон. Воспользуемся псевдоклассом after:
/** my "fake" background that will hover the stripes **/
#content:after{
background:#F9F9F9;
margin:10px;
position: absolute;
content: " ";
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: -1;
border:1px #E5E5E5 solid;
border-radius:8px;
}
Оформляем заголовок H1 Для заголовка H1, я выбрал шрифт Questrial, для тела контактной формы — Droid Sans, а для амперсанда — шрифт Alice. Все эти шрифты есть в каталоге шрифтов от Google, поэтому, все, что мне нужно сделать — это использовать API-код от Google:
Теперь оформляем заголовок.
H1 {
font-family: "Questrial", Verdana, sans-serif;
text-align:center;
font-size:40px;
padding:0;
margin:0 0 20px 0;
position:relative;
color:#8C8C8C;
}
/** have a nice ampersand **/
h1:after {
font-size:25px;
color:#D6CFCB;
content: "&";
text-align:center;
display:block;
width:100%;
font-family: "Alice", Verdana, serif;
text-shadow: 0px 1px 0px #fff;
}
/** create the gradient bottom **/
h1:before {
position:absolute;
bottom:15px;
content: " ";
text-align:center;
display:block;
height:2px;
width:100%;
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* W3C */
}
Добавим пиктограммы без использования картинок Мы сделаем это с помощью шрифтовых иконок. Вы можете использовать, тот иконочный шрифт, который во вложении, а можете использовать любые другие, мне нравится составлять пакеты иконок с сайта flaticon.com. Преимущества использования шрифтов в нашем контексте — очевидно. Мы можем манипулировать размером, цветом и даже анимацией иконок. Чего не скажешь об обычных изображениях. Кроме того, мы всегда выигрываем в качестве отображения на retina дисплеях.
/** adding our icon font !! */
@font-face {
font-family: "IconicStroke";
src: url("font/iconic_stroke-webfont.eot");
src: url("font/iconic_stroke-webfont.eot?#iefix") format("embedded-opentype"),
url("font/iconic_stroke-webfont.woff") format("woff"),
url("font/iconic_stroke-webfont.ttf") format("truetype"),
url("font/iconic_stroke-webfont.svg#IconicStrokeRegular") format("svg");
font-weight: normal;
font-style: normal;
}
.iconic:before{
font-size:25px;
font-family: "IconicStroke";
}
.iconic.link:before { content: "/"; }
.iconic.quote-alt:before { content: """; }
.iconic.comment:before { content: "q"; }
.iconic.user:before { content: "u"; }
.iconic.mail-alt:before { content: "M"; }
Теперь можно оформить наши поля ввода данных в неактивном и активном состоянии.
/** we remove the red glow around required fields since we are already using the red star */
input:required, textarea:required {
-moz-box-shadow:none;
-webkit-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
}
/** inputs and textarea**/
input:not(),
textarea{
outline:none;
display:block;
width:380px;
padding:4px 8px;
border:1px dashed #DBDBDB;
color:#3F3F3F;
font-family:"Droid Sans",Tahoma,Arial,Verdana sans-serif;
font-size:14px;
border-radius:2px;
transition:background 0.2s linear,
box-shadow 0.6s linear;
}
input:not():active,
textarea:active,
input:not():focus,
textarea:focus{
background:#F7F7F7;
border:dashed 1px #969696;
box-shadow:2px 2px 7px #E8E8E8 inset;
}
input:not(){
height: 20px;
}
textarea{
min-height:150px;
resize:vertical
}
/* placeholder */
::-webkit-input-placeholder {
color:#BABABA;
font-style:italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
color:#BABABA;
font-style:italic;
}
Оформление кнопки «Отправить» и подписей Для кнопки «Отправить» мы используем тип поля type=submit . К сожалению, для оформления такого типа полей, мы не сможем воспользоваться псевдоклассами:before и:after . Поэтому я внедрил спецсимвол непосредственно в код HTML. Конечно, это не лучшее решение, так что вы можете его просто удалить.
/** Styling the send button **/
input{
margin-left:235px;
cursor:pointer;
background:none;
border:none;
font-family: "Alice",serif;
color:#767676;
font-size:18px;
padding:10px 4px;
border:1px solid #E0E0E0;
text-shadow: 0px 1px 1px #E8E8E8;
background: rgb(247,247,247);
background: linear-gradient(top, rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
border-radius:5px;
box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
transition:all 0.2s linear;
}
input:hover{
color:#686868;
border-color: #CECECE;
background: linear-gradient(top, rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
input:active,
input:focus{
position:relative;
top:1px;
color:#515151;
background: linear-gradient(top, rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
Чтобы форма имела законченный вид, давайте добавим приятные цвета и переходы к подписям при наведении на них курсором.
Label{
color:#7F7E7E;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}
label:hover{
color:#191919;
}
label:before{
color:#C1BFBD;
transition: color 1s ease;
}
label:hover:before{
color:#969696;
transition: color 1s ease;
}
p{
margin-bottom:20px;
}
.indication{
color:#878787;
font-size:12px;
font-style:italic;
text-align:right;
padding-right:10px;
}
.required{
color:#E5224C;
}
Вместо заключения Я надеюсь, что эта небольшая запись помогла вам лучше понять возможности HTML5 и CSS3. Еще раз подчеркну, что это лишь заготовка, которую вы можете использовать как основу для своих разработок. Во вложении к записи форма обратной связи адаптивна.
В данной статье речь пойдет о динамической форме обратной связи, которая при изменении размера окна, будет становится адаптивной к просмотру. То есть форма обратной связи будет доступна для просмотра на всех видах устройств, на персональных компьютерах, ноутбуках, смартфонах и планшетах.
Форма обратной связи будет состоять из 3 полей ввода данных - имя, адрес электронной почты и текст письма. Все поля будут обязательны для заполнения, отправить пустое письмо будет нельзя. Поле ввода адреса электронной почты дополнительно будет проходить валидацию на правильность ввода. Данные будут представлены в html коде, стили оформления формы обратной связи будут прописаны в отдельном CSS файле. По принципу данного скрипта возможно создание по аналогии большего или меньшего количества полей ввода.
Преимущества использования данной формы заключаются в непрерывной работе сайта и динамической отправки данных из формы, без перезагрузки страницы. А также нужно отметить удобство просмотра на мобильных устройствах.
В файле send.php править следующие строки:
$to = "[email protected] ";
$subject= "Message from site.ru";
$header="From: site.ru";;
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto");
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #d3dce1;
font-family: "Roboto", sans-serif;
font-size: 14px;
}
.outer {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
text-align: center;
width: auto;
padding: 0 15px;
}
.login-wr {
position: relative;
margin: 0 auto;
background: #fff;
max-width: 550px;
box-shadow: 3px 3px 24px #999;
padding: 15px 15px 15px 15px;
}
h2 {
text-align: left;
font-weight: 200;
font-size: 1.6em;
margin: 0 0 10px 0;
padding: 0 0 10px 0;
border-bottom: 1px solid #eeeeee;
color: #474747;
}
.form {
padding-top: 20px;
text-align: left;
}
input,
input {
margin-bottom: 25px;
height: 40px;
outline: 0;
-moz-outline-style: none;
}
button {
height: 40px;
outline: 0;
-moz-outline-style: none;
}
input {
background: url("img/user.png") no-repeat left 10px center;
}
input {
background: url("img/email.png") no-repeat left 10px center;
}
textarea {
background: url("img/pencil.png") no-repeat left 10px top 10px;
}
textarea {
width: calc(100% - 55px);
height: 120px;
border: 1px solid #bbb;
padding: 10px 10px 10px 45px;
font-size: 14px;
}
input,
input {
width: calc(100% - 45px);
max-width: 250px;
border: 1px solid #bbb;
padding: 0 0 0 45px;
font-size: 14px;
}
input:focus,
input:focus {
border: 1px solid #2196f3;
}
p {
padding-bottom: 10px;
}
button {
width: 100%;
max-width: 150px;
background: #e6ebee;
border:none;
border-bottom: 5px solid #d3dce1;
color: #333;
font-size: 14px;
font-weight: 200;
cursor: pointer;
transition: box-shadow .4s ease;
}
$(function() {
$("#loader").hide();
$("form").submit(function(e) {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var data = "name=" + name + "&email=" + email + "&message=" + message;
if(data) {
$.ajax({
type: "POST",
url: "./send.php",
data: data,
beforeSend: function(html) {
$("#loader").show();
$("#submit").hide();
},
success: function(html){
$("#loader").hide();
$("#result").html(html);
}
});
}
return false;
});
});