Главная / Верстка сайта / Разрабатываем уникальную форму контактов с CSS3-переходами

Разрабатываем уникальную форму контактов с CSS3-переходами

Вдохновившись контактной формой на сайте Clear Span Media, я решил воссоздать эффект «выезда» письма из конверта при наведении курсора. Пример в действии можно посмотреть здесь:

Разрабатываем уникальную форму контактов с CSS3-переходами

Скачать исходные файлы

Стоит отметить, что она будет работать только в браузерах с поддержкой CSS3 и переходов. В IE не будет видно конверта. Конечно, можно обойти этот недостаток при помощи jQuery, но сегодняшняя статья посвящена не этому.

Давайте взглянем на HTML-структуру:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contact Form</title>
</head>
<body>
<div id="wrap">
<h1>Send a message</h1>
<div id=’form_wrap’>
<form>
<p>Hello Joe,</p>
<label for="email">Your Message : </label>
<textarea name="message" value="Your Message" id="message" ></textarea>
<p>Best,</p>
<label for="name">Name: </label>
<input type="text" name="name" value="" id="name" />
<label for="email">Email: </label>
<input type="text" name="email" value="" id="email" />
<input type="submit" name ="submit" value="Now, I send, thanks!" />
</form>
</div>
</div>
</body>
</html>

Суть в следующем (я постарался проиллюстрировать это на схеме, приведенной ниже): #form_wrap имеет относительное позиционирование (top:0), а конверт зафиксирован по нижней границе этого блока. Форма также имеет относительное позиционирование, top:200px.

Для form и #form_wrap значение свойства overlay установлено в hidden. Когда курсор мыши наведен на #form_wrap, высота этого элемента и высота формы (form) увеличивается до 350px, а top элемента #form_wrap изменяется на -200px.

Разрабатываем уникальную форму контактов с CSS3-переходами

Нам нужно разрезать конверт на две части – верхнюю, которая расположена сверху письма (after.png) и нижнюю (before.png), которая будет частично закрыта письмом. Вы можете использовать представленный здесь .ai-файл.

Разрабатываем уникальную форму контактов с CSS3-переходами

Давайте взглянем на таблицу стилей:

Разрабатываем уникальную форму контактов с CSS3-переходами

Дальше нам нужно задать стили для элементов формы:

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, а второй за эффект при наведении курсора.

Мне хотелось, чтобы кнопка submit не отображалась до тех пор, пока не завершится переход form и #form_wrap. Но чтобы эффект исчезал мгновенно, когда курсор покидает пределы #form_wrap.

#form_wrap input[type=submit] {
-webkit-transition: opacity 0.6s ease-in-out 0s;
-moz-transition: opacity .6s ease-in-out 0s;
-o-transition: opacity .6s ease-in-out 0s;
transition: opacity .6s ease-in-out 0s;
}

#form_wrap:hover input[type=submit] {
-webkit-transition: opacity .5s ease-in-out 1.3s;
-moz-transition: opacity .5s ease-in-out 1.3s;
-o-transition: opacity .5s ease-in-out 1.3s;
transition: opacity .5s ease-in-out 1.3s;
}

Мы уже почти закончили. Нужно просто добавить небольшой фрагмент jQuery-кода, чтобы все правильно работало и в IE. Переход будет похожим, но не идентичным:

<!—[if IE]><script>
$(document).ready(function() {
$("#form_wrap").addClass(‘hide’);
$("#form_wrap").prepend( ‘<div id="before"></div>’).append( ‘<div id="after"</div>’);
$("#form_wrap").hover(function(){
$(this).stop(true, false).animate({
height : ‘836px’,
top : ‘-200px’
}, 2000);
$(‘form’).stop(true, false).animate({
height : ‘580px’
}, 2000, function(){
$(‘#form_wrap input[type=submit]’).css({‘z-index’ : ‘1’, ‘opacity’ : ‘1’})} ) }, function() {
$(‘#form_wrap input[type=submit]’).stop(true, true).css({ ‘opacity’ : ‘0’})
$(this).stop(true, false).animate({
height : ‘446px’,
top : ‘0px’

}, 2000);
$(‘form’).stop(true, false).animate({
height : ‘200px’}, 2000)
})
})
</script><![endif]—>

Вам осталось просто добавить в таблицу стилей #form_wrap.hide:after, #form_wrap.hide:before {display:none;}, а также:

#before {position:absolute;
bottom:128px;left:0px;
background:url(‘images/before.png’);
width:530px;height: 316px;}

#after {position:absolute;
bottom:0px;left:0;
background:url(‘images/after.png’);
width:530px;height: 260px; }

Ждем ваших комментариев! Если вам понравилось это руководство, обязательно поделитесь им с друзьями!

Перевод статьи “Create a unique contact form with css3 transitions” был подготовлен дружной командой проекта Сайтостроение от А до Я.

О нас seoexpert

продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

Смотрите также

Создание цветной рамки вокруг текста с помощью HTML и CSS

Рамка на HTML-страницах, созданная с помощью border color, помогает привлечь внимание к тексту или выделить ...