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

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

preview

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

Стоит отметить, что она будет работать только в браузерах с поддержкой 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.

contact_scheme

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

tuto_envelopes

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

css1

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

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” был подготовлен дружной командой проекта Сайтостроение от А до Я.

18 августа 2015 в 21:53
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок