<MyRusakov.ru />

Joomla 3 с Нуля до Гуру

Joomla 3 с Нуля до Гуру

Видеокурс «Joomla 3 с Нуля до Гуру» поможет Вам повысить свой уровень в веб-разработке и научит создавать удобные и эффективные сайты на Joomla 3. Курс подходит как для опытных вебмастеров, так и для новичков, кто ещё только начинает.

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

После планирования начинается техническая реализация и создание собственного адаптивного шаблона.

Далее рассмотрен процесс переноса и настройки на хостинге, оптимизация под поисковые системы и защита от хакерских атак.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Адаптивная форма обратной связи

Адаптивная форма обратной связи

На большинстве сайтах поля форм обратной связи, по ширине не больше 300 пикселей. Форма с максимальной шириной в 320 пикселей целиком поместится на экране любого смартфона без масштабирования.

Но все-же на некоторых макетах встречаются формы во всю ширину браузера, поля которых, выстроены в строку, включая кнопку Submit. Такая форма занимает целую секцию.

Адаптивная форма обратной связи.

Давайте посмотрим, как можно адаптировать такую форму, под разные разрешения экранов.

Демонстрация адаптивной формы.

HTML разметка

В контейнер с классом wrapper, помещаем блок с классом newsletter, который содержит в себе заголовок h2 и форму. У формы два текстовых поля type="text" для ввода имени и е-майла пользователя и кнопка Отправить.

<div class="wrapper">
  <div id="newsletter">
    <h2>Подпишитесь на наши новости</h2>
    <form method="post" action="#">
    <input type="text" placeholder="Имя">
    <input type="text" placeholder="Email">
    <button type="submit" title="Submit">Отправить <i class="fa fa-angle-right"></i></button>
    </form>
  </div>
</div>

Без оформления стилей, наша форма выглядит не так, как на макете. Поэтому переходим к написанию CSS кода.

Адаптивная форма обратной связи.

CSS код

Сперва создадим секцию во всю ширину экрана с сине-зеленым цветом фона, заранее обнулив паддинги и маржины в теге body.

.wrapper{
  width: 100%;
  background-color: #7eadbe;
}

Форма и заголовок имеют отступы сверху и снизу и расположены они в центре страницы. Поэтому мы создаем ещё один блог с идентификатором newsletter, относительно которого и cпозиционируем заголовок с формой.

#newsletter{
  padding:20px 0;
  text-align:center;
}

Сделаем заголовок более заметным, прежде всего за счет размера.

h2 {
  font-size: 30px;
}

А так же выберем шрифт из семейства Google Font и цвет шрифта. Строчку ниже пропишем в самом верху файла стилей.

body {
  font-family: 'Marck Script', sans-serif;
  color: #fff;
}

Дальше стилизуем поля формы и кнопку.

input, button{
  display:inline-block;
  outline:none;
  padding: 9px 18px;
  margin-right:10px;
  border: none;
}

input{
  width: 30%;
  background-color: #7ec4ce;
}

input[placeholder] {
  color: #fff;
}

input[type="text"]::-webkit-input-placeholder {
  color: #fff;
}
input[type="text"]::-moz-placeholder {
  color: #fff;
}

button {   padding: 9px 18px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  color: #fff;
  background-color: #7ec4ce;
}

Секция с формой готова , но при уменьшении размеров экрана, на ширине 680 пикселей поля формы схлопываются. Это значит, что форма ещё не адаптирована под другие устройства.

Адаптивная форма обратной связи.

Техника адаптирования формы

Переключитесь в инструменты разработчика в Google Chrome, вверху сайта вы увидите текущую ширину для десктопов, начинайте уменьшать мышкой окно браузера, запомните, на какой ширине экрана, поля формы начнут ломаться. В нашем случае с формой, это будет цифра 680 пикселей.

Теперь для всех устройств с шириной от 240 пикселей до 680 пикселей, вносим изменения в CSS стили, которые регулирует ширину и отображение полей.

Свойство display: block, поставит поля формы друг под другом, это сэкономит место. Свойство margin: 10px auto, создаст вертикальные отступы между ними и выравнит их по центру.

@media screen and (min-width:240px) and (max-width:680px) {
  input, button{
  display: block;
  margin: 10px auto;
}

  input{
  min-width:220px;
}
}

На самых маленьких разрешениях, зададим минимальную ширину полей, чтобы эффективнее заполнить пустующее пространство. input{min-width:220px;}

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

Адаптивная форма обратной связи.

Рекомендую к просмотру очень подробный видеокурс "О создании лендинга под ключ". Никакой воды, все только по делу.

Код целиком:

See the Pen CSS3 responsive form by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.