Контактная форма для сайтас картой RUDEBOXВ данном уроке мы рассмотрим как реализовать замечательную стилизацию контактной формы, но не просто контактной формы, но еще и карты, с обозначением целевой информации и социальных сетей, форма практически рабочая, если Вы хотите, чтобы пользователи могли отправлять с нее письма, то Вам необходимо прикрутить пару строчек php, каких именно читайте в наших предыдущих уроках по реализации контактной формы с возможностью отправки писем, тем не менее вернемся к нашему сегодняшнему уроку и реализуем нашу задумку.

 

Дизайн формы выполнен в темных тонах, кроме этого форма окна обрамлена в интерфейс новой операционки от разработчиков из Купертино-MacOSX. Смотрится очень даже, что весьма заинтересует пользователя. И так, давайте приступим.

Шаг 1. HTML

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

В правой стороне мы установили, как и полагается, формы стандартного ввода информации, кнопку «отправить», в низу мы отобразили наши контакты.

Контактная форма для сайтас картой на CSS RUDEBOX_mini

Шаг 2. CSS

Теперь все это нужно залить цветовой палитрой, мы отобразим маленькие иконки для соц. сетей и для социальных закладок, кроме этого установим градиентную заливку для окна, которое напоминает окно операционной системы, с фиктивными кнопками манипуляций, для получения округлой формы мы установим значение opacity на 50%, что скруглит края квадрата и превратит его в окружность.

Все достаточно просто, при этом мы получаем достойный пример который можно прикрутить к своему сайту.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: