Главная страница » CSS » Как создать анимированную контактную форму

Как создать анимированную контактную форму

Связь с администратором на сайте является не последним ключевым звеном в сайтостроении, ведь если посетителю что-то не понятно, он может написать об этом в контактной форме, оставив при этом свои данные для дальнейшего ответа. Зачастую такие формы достаточно однообразные и не бросаются в глаза, что приводит к потере положительных отзывов о ресурсе. Но если вы не хотите повторять ошибки большинства, и создать нечто уникальное и притягивающее взор посетителя, тогда данная анимированная контактная форма станет вам весьма интересна.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Основная идея состоит в том, что контактная форма находится в письме и напоминает клочок бумаги, на которой можно написать сообщение и отправить его администратору. При этом происходит анимация разворота бумаги из конверта. Форма работае в браузерах, поддерживающих переходы CSS3. И так, приступим.

Шаг 1. HTML

Для начала мы создадим простую разметку, в которой элемент #form_wrap позиционируется относительно (top:0), а конверт фиксируется у него внизу.

<form>

<p>Связаться с Администратором сайта</p>

<label for="email">Cообщение : </label>

<p>Укажите личную информацию</p>

</form>

</div>

Элемент form позиционируется относительно (top:200px). Специальный слой перекрывает form и #form_wrap. При наведении курсора на элемент #form_wrap, его высота и высота элемента form увеличиваются на 350px, и одновременно изменяется свойство top элемента #form_wrap до значения -200px.

Затем подготовим части конверта, Видимая часть над письмом (after.png) и нижняя часть под письмом (before.png).

Шаг 2. CSS

Для начала добавим стили для элементов данной формы.

label {

margin: 11px 20px 0 0;

font-size: 16px; color: #b3aba1;

text-transform: uppercase;

text-shadow: 0px 1px 0px #fff;

}

input[type=text], textarea {

font: 14px normal normal uppercase helvetica, arial, sans-serif;

color: #7c7873;background:none;

width: 380px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0;

border:1px solid #f8f5f1;

-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;

-moz-box-shadow: inset 0px 0px 1px #726959;

-webkit-box-shadow: inset 0px 0px 1px #b3a895;

box-shadow: inset 0px 0px 1px #b3a895;

}

textarea { height: 80px; padding-top:14px;}

textarea:focus, input[type=text]:focus {background:rgba(255,255,255,.35);}

#form_wrap input[type=submit] {

position:relative;font-family: 'YanoneKaffeesatzRegular';

font-size:24px; color: #7c7873;text-shadow:0 1px 0 #fff;

width:100%; text-align:center; opacity:0;

background:none;

cursor: pointer;

-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;

}

#form_wrap:hover input[type=submit] {z-index:1;opacity:1;}

#form_wrap:hover input:hover[type=submit] {color:#435c70;}

Далее установим параметры перехода для form и #form_wrap.

-webkit-transition: all 1s ease-in-out .3s;

-moz-transition: all 1s ease-in-out .3s;

-o-transition: all 1s ease-in-out .3s;

transition: all 1s ease-in-out .3s;

Следующий этап весьма интересный, мы добавляем трансформацию для элемента input[type=submit]. Первый набор соответствует действиям, когда курсор мыши покидает элемнет #form_wrap, а второй — когда курсор мыши заходит на элемент #form_wrap.