<MyRusakov.ru />

Создание игр на Unreal Engine 5

Создание игр на Unreal Engine 5

Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

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

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

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

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

Какая тема Вас интересует больше?

Адаптивная контактная форма

Адаптивная контактная форма

На этом уроке мы будем создавать адаптивную контактную форму на всю ширину браузера, используя CSS и медиа-запросы.

Демонстрация примера.

HTML-разметка

Для тега form создадим розовый блок с классом container.

<div class="container">
  <form action="#">
  </form>
</div>

Внутри тега форм создадим пять рядов с классом row. Внутри каждого ряда, кроме последнего будет две колонки: первая – с классом col-25, вторая с классом col-75. Первая колонка будет служить оберткой для label, вторая колонка – оберткой для поля ввода.

<div class="row">
  <div class="col-25">
    <label for="fname">Имя</label>
  </div>
  <div class="col-75">
    <input type="text" id="fname" name="firstname" placeholder="Ваше имя..">
  </div>
  </div>

Таким образом, продемонстрированный выше фрагмент кода, будет повторяться два раза (занимать первые два ряда), меняться будет только содержимое label и полей ввода. В третьем ряду row, вместо поля ввода, вы увидите поле выбора с опциями.

<div class="row">
  <div class="col-25">
    <label for="country">Страна</label>
  </div>
  <div class="col-75">
  <select id="country" name="country">
    <option value="finland">Финляндия</option>
    <option value="germany">Германия</option>
    <option value="italy">Италия</option>
  </select>
  </div>
</div>

Четвёртый ряд состоит из label и область для ввода текста.

<div class="row">
  <div class="col-25">
    <label for="subject">Тема</label>
  </div>
  <div class="col-75">
    <textarea id="subject" name="subject" placeholder="Напишите что-нибудь.." style="height:200px"></textarea>
  </div>
</div>

Пятый ряд содержит только кнопку Отправить.

<div class="row">
  <input type="submit" value="Отправить">
</div>

Мы наметили только HTML структуру, дальше предстоит большая работа со стилями.

CSS-код

Когда речь идет об адаптивной контактной форме, это значит, что все значения width (ширина), следует задавать в %. Для самого родителя формы - container, мы не будем задавать ширину.

.container {
  border-radius: 5px; /* скруглим углы */
  background-color: #f8bbD0;
  padding: 20px;
}

А зададим ширину у колонок, 25% будут занимать лейблы, а 75% – поля формы, от всей ширины контейнера. Не забудем про float, это выстроит обе колонки в ряд.

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
  color: #212121;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

Псевдокласс after, должен очищать ряды row после обтекаемых колонок, чтобы каждый новый ряд начинался с новой строки.

.row:after {
  content: "";
  display: table;
  clear: both;
}

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

label {
  padding: 10px 10px 10px 0;
  display: inline-block;
}

Для полей ввода, элементов выбора и текстовой области задаются общие стили.

input[type=text], select, textarea {
  width: 100%; /* ширина полей*/
  padding: 10px; /* отступы*/
  border: 1px solid #bdbdbd; /* толщина стиль цвет рамки*/
  border-radius: 5px; /* скругление углов*/
  resize: vertical; /* Можно изменять размеры элемента по вертикали*/
}

Для поля с кнопкой Отправить, свои отдельные стили с правым обтеканием (float: right).

input[type=submit] {
  background-color: #e91e63;
  color: #fff;
  padding: 10px 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  float: right;
}

При наведении мыши, кнопка Отправить, изменит цвет фона.

input[type=submit]:hover {
  background-color: #c2185b;
}

Все элементы стилизованы, на десктопном экране все хорошо.

Адаптивная контактная форма

Работа над адаптивностью

Теперь посмотрим, что у нас с адаптивностью, уменьшаем браузер и видим, что на разрешении экрана, меньше 600 пикселей, лейблы стали некрасиво прижиматься к полям ввода, а слова перескакивать на новые строки.Вообщем надо избавляться от двух колонок, а оставить только одну колонку шириной 100%, на ширине меньше 600 пикселей. Кнопку Отправить мы сделаем тоже на всю ширину формы.

@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  } }

Осталась только одна колонка.

Адаптивная контактная форма

Код целиком на CodePen:


See the Pen Responsive Form by porsake (@porsake) on CodePen.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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