<MyRusakov.ru />

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

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

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

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

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

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

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

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

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

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

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

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

Зачем Вы изучаете программирование/создание сайтов?

Верстка формы + скрипт выбора даты

Верстка формы + скрипт выбора даты

На этом уроке, мы займемся версткой формы, пока без отправления данных на сервер. Кроме того, установим скрипт выбора даты, при онлайн бронировании.

Изучение макета

Перед нами фрагмент формы для бронирования из реального PSD макета, из которого нужно сделать HTML страницу с точно таким же стилевым оформлением.

 Верстка формы + скрипт выбора даты.

Мысленно разобьем макет-дизайн формы, на блоки-обертки и вложенные в них элементы. Мы сгруппировали однотипные элементы в четыре блока и всю эту конструкцию поместили в один общий контейнер booking_form.

  • В первом блоке - заголовок h2
  • Во втором input_contact – четыре текстовых поля для контактов
  • В третьем input_label – два текстовых поля с метками
  • В четвертом submit_button – кнопка Отправить

Зачем обертывать однотипные элементы в общие блоки? Так, нам проще задавать для них общие стили оформления, делать отступы и контролировать их расположение и поведение.

В атрибут placeholder закладывается подсказка, какую информацию, должен ввести пользователь

HTML структура

<div class="booking_form">
<h2>Забронировать визит</h2>
  <form action="#">
    <div class="input_contact">
      <input type="text" placeholder="Имя">
      <input type="text" placeholder="Фамилия">
      <input type="text" placeholder="Е-майл">
      <input type="text" placeholder="Тел.">
    </div>
    <div class="input_label">
      <label><span>Время</span><input type="text"></label>
      <label><span>Дата</span><input type="text" id="datepicker"></label>
    </div>
    <div class="submit_button">
      <input type="submit" value="Отправить">
    </div>
  </form>
</div>

Написать HTML код, можно, просто глядя на макет, однако для написания CSS, необходимо детально погрузиться в Photoshop или Avocode.

CSS код

Задаем общие базовые стили для всех элементов. Обнуляем поля и отступы, убираем дефолтную обводку внутри полей и уберем влияние паддингов и маржинов на размеры элементов (border-box).

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

Максимальная ширина формы, отступы от края браузера. Свойство auto, ставит форму посередине от правого и левого края браузера.

.booking_form {
    max-width: 400px;
    margin: 4rem auto;
}

Стилевое оформление для заголовка. Шрифт Roboto Condensed, находите на Google Font и выполняете их инструкции.

h2 {
    font-family: 'Roboto Condensed';
    font-size: 32px;
    color: #313030;
    padding-bottom: 30px;
}

Для того, чтобы во втором блоке, поля расположить в строку, подключаем flex-технологию. Свойство space-between, раскидает инпуты по краям формы, а свойство wrap, разрешит перенос полей на новую строку.

.booking_form .input_contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

Для достижения лучшей кроссбраузерности, добавим вендорные префиксы, для flexbox c помощью сервиса.

https://autoprefixer.github.io/ru/

Общие стили оформления, для вводимого текста для всех текстовых полей.

input[type=text] {
    height: 30px;
    border: 1px solid #f1f1f1;
    padding: 0 13px;
    font-family: 'Open Sans';
    color: #737272;
    font-size: 14px;
}

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

.booking_form .input_contact input[type=text] {
    width: 190px;
    margin-bottom: 15px;
}


.booking_form .input_label input[type=text] {
    width: 320px;
    margin-bottom: 15px;
}

В третьем блоке, label и input, расположим в строку.

.booking_form .input_label label {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

Отдельно стилизуем, метки.

.booking_form .input_label span {
    font-family: 'Open Sans';
    color: #737272;
    font-size: 14px;
    line-height: 30px;
}

Текст у placeholder.

input::-webkit-input-placeholder,
input::-moz-input-placeholder {
    font-family: 'Open Sans';
    color: #737272;
    font-size: 14px;
}

При установке курсора в текстовое поле, текст у placeholder, исчезает.

*:focus::-webkit-input-placeholder {
    color: transparent;
}


*:focus::-ms-input-placeholder {
    color: transparent;
}

Сместим кнопку к правому краю формы.

.booking_form .submit_button {
    display: flex;
    justify-content: flex-end;
}

Оформление для кнопки.

.booking_form input[type=submit] {
    width: 120px;
    height: 45px;
    background: #607D8B;
    color: #fff;
    font-family: 'Roboto Condensed';
    font-size: 20px;
    margin-top: 20px;
    border: none;
    cursor: pointer;
}

Скрипт выбора даты jQuery UI

https://jqueryui.com/datepicker

К текстовому полю, прикрутим идентификатор datepicker, при клике по которому появится календарь.

<label><span>Дата</span><input type="text" id="datepicker"></label>

Подключим между тегами head, CSS файл библиотеки.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Перед закрывающим тегом body подключим обе библиотеки и инициализируем скрипт выбора даты datepicker.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
$( function() {
    $( "#datepicker" ).datepicker();
});
</script>

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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