<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Фильтр категорий товаров на JavaScript (часть 2)

Фильтр категорий товаров на JavaScript (часть 2)

HTML разметка для карточек товаров

Для создания карточек товаров нам потребуется блок main с классом content и еще один флексовый контейнер с карточками внутри. Присвоим всем карточкам один общий класс card с одинаковыми стилями и отдельные классы, отличающиеся только по цвету. В дальнейшим эти классы будут нужны для фильтрации.

<main class="content">
    <div class="container">
        <div class="card clothing">Clothing</div>
        <div class="card decor">Decor</div>
        <div class="card bags">Bags</div>
        <div class="card decor">Decor</div>
        <div class="card clothing">Clothing</div>
        <div class="card bags">Bags</div>
        <div class="card bags">Bags</div>
        <div class="card decor">Decor</div>
        <div class="card clothing">Clothing</div>
    </div>
</main>


Фильтр категорий товаров на JavaScript.

CSS стили для карточек

Вытягиваем наши карточки в строку, благодаря свойству display: flex. Включим временную подсветку для контейнера в учебных целях, которую впоследствии удалим.

.content {
    width: 1024px; /* ограничение ширины контейнера */
    margin: 0 auto; /* отступ сверху и центрирование контейнера по горизонтали */
}

.container {     display: flex; /* включить флексовый контейнер */
    flex-wrap: wrap; /* разрешить карточкам переносится на следующий ряд */
    justify-content: flex-start; /* расположение элементов слева направо */
    margin: 0 -15px; /* задаем отрицательные боковые отступы */
    margin-bottom: 10px;
    background-color: yellow; /* подсвечивание контейнера */
}


Фильтр категорий товаров на JavaScript.

Осталось стилизовать сами карточки. Наши карточки являются flex-элементами внутри flex-контейнера, где каждый элемент занимает одну треть от ширины контейнера. Рассчитаем базовую ширину одной карточки с учетом отступов между ними, c помощью CSS функции calc(). Она позволяет выполнять простые математические действия между разными единицами измерения. От ширины каждой карточки мы отнимем 30 пикселей (отступы с обеих сторон карточки, по 15 пикселей). В CSS свойствах для дочерних элементов .card зададим соответственно отступы по 15 пикселей, а для родительского .container зададим отрицательные боковые отступы. За счет отрицательных маржинов, мы убираем ненужные боковые отступы так, чтобы остались только промежутки между блоками.

.card {
    width:calc(1/3*100% - 30px); /* 1/3 – 3 карточки в ряд, а 30px – ширина между карточками */
    margin: 15px; /* отступы между карточек */
    height: 150px; /* высота карточки */
    line-height: 150px; /* выравнивание по центру текста внутри карточки по вертикали */
    text-align: center; /* выравнивание по центру текста внутри карточки по горизонтали */
    color: white; /* цвет текста */
    font-weight: bold;/* жирность текста */
    font-size: 50px; /* размер текста */
    background-color: #7a9850;/* временное подсвечивание карточек */
}


Фильтр категорий товаров на JavaScript.

Раскрасим наши карточки в такой же цвет, как у категорий, к которым они относятся.

.clothing {
    background-color: #7a9850;
}

.decor {
    background-color: #c55a71;
}

.bags {
    background-color: #182f0f;
}

Наша верстка полностью готова, на следующем уроке вдохнем жизнь в эту конструкцию с помощью языка JavaScript.


Фильтр категорий товаров на JavaScript.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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