Контактная форма на 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Каждый человек имеет право на собственное мнение — при условии, что оно совпадает с нашим Шоу Джордж Бернард - 1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.