Форма обратной связи, или если по другому, один из самых важных элементов любого сайта. И конечно же, как и все другие элементы пользовательского интерфейса, контактные , должны быть как-то внешне стилизованы и оформлены, дабы привлечь внимание пользователей и расположить к общению.
Предлагаю на ваше обозрение парочку вариантов стилей форм обратной связи, исключительно средствами 3, без использования дополнительных изображений в оформлении. Ничего лишнего, лишь короткие фрагменты кода (сниппеты) для контактных форм, выполненных в светлых и тёмных тонах.
В зависимости от цвета основного фона страницы, визуально будет меняться базовый цвет фона самой формы. Размер формы зависит от размеров контейнера, в котором форма будет расположена.
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> < input name= "submit" class = "btn" type= "submit" value= "Отправить" /> |
По стилям особо расписывать ничего не буду, отмечу лишь одно, в оформлении использовал некоторые свойства 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; }
Второй вариант оформления формы обратной связи представлен в светлых тонах, размеры формы (ширина, высота), как и в первом варианте не фиксированы, и легко будут вписываться в размеры контейнера где эта формы будет расположена.
Как и в первом варианте, структура 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> < input name= "submit" class = "button" type= "submit" value= "Отправить" /> |
При формировании базовых размеров форм и внутренних элементов, использовал процентные значения для ширины 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. На страницах моего блога, вы можете найти другие, и примеры стилистики форм обратной связи.
Для особо невнимательных, хочу, в который уже раз, пояснить: представленные в статье формы, это всего лишь внешняя оболочка, чтобы формы реально выполняли свои функции, к ним необходимо прикрутить скрипт-обработчик, коих полно разбросано в «интернетах», так что убедительная просьба, не писать в комментариях, что формы не работают и т.п., всё прекрасно работает, просто нужно понимать что, куда и зачем))).
С уважением, Андрей.
В этой статье мы научимся верстать формы на примере обратной связи и использовать для них семантическую разметку, рассмотрим несколько тонкостей и нюансов, и постараемся сделать максимально одинаковое отображение нашей формы в различных браузерах, вплоть до IE6.
Последнее обновление статьи — 27.08.2013 .
Для создания формы используется тег
Попробуем добавить поля для заполнения имени пользователя, электронной почты и кнопку отправки формы:
Для создания строк чаще всего используются теги
Можно использовать вариант со списком определений, ненумерованным списком или таблицей, что семантически будет тоже вполне корректно:
Обратите внимание на то, что мы также задаем атрибут name для всех полей, чтобы потом получать доступ к ним с помощью сценариев. name должен быть уникален и желательно присвоить ему тоже самое значение, что и для id . Также мы явно задаем пустое значение value для того чтобы застраховаться от ошибок в браузерах.
Итак, вот что мы имеем на данный момент, пока без оформления CSS:
Сейчас наша форма выглядит довольно просто и скучно, давайте усложним ее, добавим дополнительные поля и сделаем оформление, например вот так:
Дизайн формы
Как видите, мы добавили сюда возможность выбора опции из списка с помощью тегов
В коде видно, что используются возможности HTML5, такие как тип поля email , атрибуты placeholder и required (они позволяют обойтись без валидации формы на JS) — их мы рассмотрим чуть позже. Для старых браузеров мы позволим частичное graceful degradation, например опустим текстовые подсказки в полях (хотя их можно реализовать с помощью jQuery и плагинов), а проверку введенных данных сделаем с помощью JS и PHP. Для поддержки IE ниже 9-ой версий CSS3 свойств подключим скрипт PIE .
Давайте добавим валидацию нашей формочке. С HTML5 реализовать это достаточно просто, поэтому рассмотрим именно этот вариант.
Например, сделаем поле обязательным для заполнения.
Как видите, был добавлен всего лишь один атрибут required . Теперь при попытке отправки формы с пустым полем появится уведомление:
Внешний вид сообщения различается в браузерах и к сожалению не изменяется.
Также для поля ввода электронной почты мы можем указать тип email:
Это означает, что в данном поле подразумевается именно электронный адрес и элемент получит соответствующую валидацию. Наглядно продемонстрировано на скриншоте:
Аналогичная ситуация с полями url , date и number:
Все очень легко, без скриптов на JS/PHP.
Валидация в HTML5 работает по умолчанию, но ее возможно и отключить — добавим элементу
В браузерах на движке webkit можно изменять размер
All fields with a * are required
Для создания эффекта почтового конверта, начнем с заливки фона полосатым градиентом.
#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, я выбрал шрифт 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. Еще раз подчеркну, что это лишь заготовка, которую вы можете использовать как основу для своих разработок. Во вложении к записи форма обратной связи адаптивна.
Итак, мы завершаем цикл уроков по версте сайта с нуля с flat дизайном. Напомню, что на мы верстали шапку сайта. На - секцию с картинкой на весь экран. На - галерею с работами портфолио. На - трехколоночный макет. И как завершающим этапом, сегодня мы делаем верстку формы обратной связи и подвала.
Вот, что у нас должно получиться.
Я не буду здесь приводить весь код, он слишком большой. Код целиком и готовый результат вы можете увидеть на jsfiddle.
Моя задача показать вам принципы верстки, так сказать логику, как думает верстальщик, глядя на макет. Сначала он мысленно разбивает весь макет на большие секции. Затем каждую секцию внутри делит на маленькие блоки. Смотрите на скриншоте ниже.
Сама форма обратной связи помещена в теге div с классом part_2_of_3 и занимает она две трети от ширины родителя.
Затем идет второй блок в теге div с классом part_1_of_3 . Занимаемая им ширина - соответственно одна треть от родительского блока.
В CSS стилях:
Con{
display: block;
float:left;
margin: 3% 0 3% 1.5%;
}
.con:first-child{
margin-left:0; /* прижатие блока с формой к левому краю */
}
.part_2_of_3 {
width: 66%; /* ширина блока с формой */
}
.part_1_of_3 {
width: 32%; /* ширина блока с информацией */
}
.cont-form{
padding-bottom: 25px; /* отступ снизу от формы блока */
}
.cont-form div{
padding: 5px 0 15px;
}
.cont-form input,.cont-form input,.cont-form textarea{
width: 42%; /* ширина полей для ввода текста и емейла */
padding: 15px;
display: block;
outline: none;
background-color: #fff; /* цвет ячеек формы */
color: #888282; /* цвет вводимого текста формы */
font-size: 0.8em; /* размер шрифта вводимого текста формы */
float:left;
margin-right: 2em; /* отступ справа */
font-style: italic; /* вводимый текст курсивом */
border: 2px solid #cacaca; /* граница ячеек формы */
}
.cont-form input{
margin-right: 0em; /* отступ справа */
}
.cont-form textarea{ /* значения для текстовой области формы */
padding: 18px; /* все поля в текстовой области */
display: block;
width: 93%; /* ширина формы текстовой области */
height:180px; /* высота формы текстовой области */
background-color: #fff; /* wdtn фона текстовой области */
outline: none;
color: #888282; /* цвет вводимого текста в текстовую область */
font-size: 0.8em; /* размер шрифта текстовой области */
font-style: italic; /* курсив для текстовой области формы */
border:2px solid #cacaca;
margin-bottom: 2em;
}
.cont-form input {
font-family: Verdana, sans-serif;
font-size: 1em;
color:#fff;
padding: 0.7em 1.4em;
margin-right: 2%;
background-color: #a97b7b;
border:none;
display: block;
cursor: pointer;
outline: none;
text-transform: uppercase; /* трансформация в заглавные буквы */
float: right;
}
.comp_add p {
font-size:0.8em;
color:#525252;
line-height: 1.8em;
margin-bottom: 2%;
}
.comp_add a{
font-size:1.1em;
color:#525252;
line-height: 1.8em;
margin-bottom: 2%;
}
.list2 li img{
margin-top: 4px;
float:left;
}
.list2 li .icon{
float:left;
padding-left: 1em;
}
С версткой подвала дело обстоит намного проще. Внутри тега footer , находится блок div с копирайтом и ссылкой.
Сегодня форма обратной связи может быть везде. Чтобы привлечь внимание посетителей вам потребуется такая форма, при взгляде на которую у посетителя возникнет желание заполнить ее.
Из этой статьи вы узнаете, как создать форму обратной связи полностью на HTML5 и CSS3.
(Кликните по изображению, чтобы увидеть форму в натуральную величину)
C помощью CSS3 можно создать бесконечное множество форм обратной связи. В этой статье говорится о том, как создать форму обратной связи в виде конверта .
Контейнеры form-wrapper и form-inner потребуются нам для того, чтобы применить к ним определенные стилевые правила.
Вместо того чтобы добавлять классы в каждый элемент формы, возможно вы захотите использовать селекторы атрибутов, например, input . Но для своего примера я решил сделать так, чтобы в браузере IE6 форма не плыла. Если вы игнорируетестарые браузеры, такие как IE6, смело упрощайте ваш HTML и CSS код.
Я использую атрибут for тега label , так как он увеличивает юзабилити. Атрибут for связывает элемент label с соответствующим полем формы; значением атрибута служит ID поля.
В HTML5 к полям формы можно добавить атрибут placeholder .
Атрибут placeholder – устанавливает замещающий текст. Текст отображается в поле формы серым цветом и пропадает, когда на поле наведен фокус.
Используя свойство CSS3 box-shadow и градиенты, мы создадим форму обратной связи в виде конверта. Ниже вы можете видеть начальный 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 кнопки без изображений как вы, вероятно, догадались.
#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; }
Ниже приведена информация о том, как можно модифицировать форму обратной связи, чтобы сделать форму рабочей.
