Контактная форма на HTML 5 и CSS3

Трудно себе представить сайт без контактной формы. Но фишка даже не в наличии подобного компонента, а в том, как он оформлен. Всем своим видом, форма должна заставить пользователя заполнить её по собственному желанию.

В этой статье вы научитесь оформлению контактной формы с помощью HTML5 и CSS3.

Прежде всего

Что такого крутого в этой контактной форме? Чем же она отличается от всех других?

Я бы сказал так… в этой форме мы не концентрируем внимание на функциональность. Фишка в этой статье в том, как оформить форму с помощью CSS3.

HTML структура

<div id="form-wrapper">
    <form>
        <div id="form-inner">

            <label for="name">Name:</label>
            <input type="text" class="input" id="name" placeholder="John Doe">

            <label for="email">Email:</label>
            <input type="email" class="input" id="email" placeholder="
 Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
 ">

            <label for="message">Message:</label>
            <textarea class="input textarea" id="message" placeholder="Your message here"></textarea>    

             <input type="submit" class="button" value="Send message">

        </div>
    </form>
</div>

form-wrapper и form-inner нам понадобятся, когда мы будем писать CSS код.

Вместо того, чтобы добавлять CSS классы для каждого элемента формы, я воспользуюсь следующим CSS селектором: input[type="text"].

Его цель состоит в том, чтобы увеличить удобство и простоту использования.

HTML5

Тут же мы будем использовать новый HTML5 атрибут placeholder. Это очень прикольная штука.

Фон

Используя новые возможности CSS3, такие как box shadow и gradient, мы можем создать интересный фон. Далее следует CSS:

CSS

#form-wrapper
{
    width: 700px;
    height: 400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    border: 1px solid #ddd;

    background-color: #fff;
    background-image: -moz-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);

    background-image: -webkit-gradient(linear, left top, right bottom,
                                                           color-stop(5%, #fff), color-stop(5%, #fff),
                                                           color-stop(15%, #844049), color-stop(15%, #fff),
                                                           color-stop(25%, #fff), color-stop(25%, #fff),
                                                           color-stop(35%, #3E4996), color-stop(35%, #fff ),
                                                           color-stop(45%, #fff), color-stop(45%, #fff),
                                                           color-stop(55%, #844049), color-stop(55%, #fff),
                                                           color-stop(65%, #fff), color-stop(65%, #fff),
                                                           color-stop(75%, #3E4996), color-stop(75%, #fff ),
                                                           color-stop(85%, #fff), color-stop(85%, #fff),
                                                           color-stop(95%, #844049), color-stop(95%, #fff));      

    background-image: -webkit-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);   

    background-image: -o-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px); 

    background-image: -ms-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);

    background-image: repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);
}

#form-wrapper:before, #form-wrapper:after
{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

#form-wrapper:after
{
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

Кнопка

Ниже вы найдёте CSS3 код, для оформления кнопки:

CSS

#form-wrapper .button
{
    float: right;
    margin: 10px 0 0 0;
    padding: 7px 15px;
    cursor: pointer;
    color: #fff;
    font: bold 13px Tahoma, Verdana, Arial;
    text-transform: uppercase;
    overflow: visible; /* IE6/7 fix */
    border: 0;  

    background-color: #7089b3;
    background-image: -moz-linear-gradient(#a5b8da, #7089b3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
    background-image: -webkit-linear-gradient(#a5b8da, #7089b3);
    background-image: -o-linear-gradient(#a5b8da, #7089b3);
    background-image: -ms-linear-gradient(#a5b8da, #7089b3);
    background-image: linear-gradient(#a5b8da, #7089b3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#a5b8da', EndColorStr='#7089b3');     

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

    text-shadow: 0 1px 0 rgba(0,0,0,.3);

    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
}

#form-wrapper .button:hover
{
    background-color: #a5b8da;
    background-image: -moz-linear-gradient(#7089b3, #a5b8da);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#7089b3), to(#a5b8da));
    background-image: -webkit-linear-gradient(#7089b3, #a5b8da);
    background-image: -o-linear-gradient(#7089b3, #a5b8da);
    background-image: -ms-linear-gradient(#7089b3, #a5b8da);
    background-image: linear-gradient(#7089b3, #a5b8da);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7089b3', EndColorStr='#a5b8da');
}

#form-wrapper .button:active
{
    background: #64799e;
    position: relative;
    top: 2px;

    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/RZ4aCBvw6zg/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Контактная форма на HTML 5 и CSS3 | | 2012-06-19 12:06:01 | | Статьи Web-мастеру | | Трудно себе представить сайт без контактной формы. Но фишка даже не в наличии подобного компонента, а в том, как он оформлен. Всем своим видом, форма должна заставить пользователя заполнить её по | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: