<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

HTML разметка для верхних кнопок с категориями

Сначала создадим всю необходимую HTML структуру - секцию header для блока filter c кнопками для категорий. Всем блокам заранее зададим классы, позже займемся написанием стилей. Первая кнопка All будет показывать все товары из разных категорий. На странице появились все четыре кнопки.


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

Обратите внимание, что тегу button присвоили основной класс и класс модификатор. Это значит, что все кнопки будут одинаковые, но разного цвета. Поэтому класс модификатор нам нужен для стилизации кнопок по цвету.

<header class="header">
    <div class="filter">
        <button class="button button_all">All</button>
        <button class="button button_clothing">Clothing</button>
        <button class="button button_decor">Decor</button>
        <button class="button button_bags">Bags</button>
    </div>
</header>

CSS стили для всей страницы

Исходя из принципа наследования, сначала задаются некоторые стили для всех элементов через селектор звездочка (*). Эти стили по умолчанию наследуются всеми вложенными тегами, если для них не будут созданы новые значения. Первым делом мы обнуляем все поля и отступы. Так мы боремся со встроенными стилями у разных браузеров - приводим их вид к общему стандарту. Все браузеры задают для этих свойств свои значения и они у всех разные. Обнуление марджинов и паддингов, стало обязательной стандартной процедурой.

// Обнуление отступов и полей для всех элементов
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

На страницах некоторые свойства повторяются у разных элементов, поэтому не помешает задать общие стили (цвет фона и оформление текста) для тега body. Заданные значения будут работать для всех элементов, пока мы их не переопределим, то есть не перейдем от общего к частному.

// Оформление для всего документа body {
    font-family: Calibri, sans-serif; /* название семейства шрифтов */
    font-size: 18px; /* название семейства шрифтов */
    line-height: 1.2; /* межстрочный интервал */
    background-color: #e7e7f3; /* цвет фона страницы */
}

CSS стили для классов header и filter


.header {
    margin-bottom: 40px; /* отодвинем блок с кнопками от карточек товара */ }

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

Сделаем класс filter флексовым контейнером, чтобы иметь больше контроля над позиционированием кнопок. Временно обозначим контейнер желтым цветом для наглядности.

.filter {
    background-color: yellow;/* временное подсвечивание контейнера */
    display: flex; /* отобразить как флексовый контейнер */
    max-width: 1024px; /* максимальная ширина контейнера */
    margin: 20px auto; /* верхний отступ и центрирование для контейнера */
    justify-content: center; /* расположение кнопок в центре контейнера */
}

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

Стилизация кнопок под категории


.button {
    padding: 16px 32px; /* установка полей, чтобы увеличить размер кнопок */
    margin-right: 20px; /* отступы между кнопками */
    cursor: pointer; /* ручка при наведении */
    color: white; /* цвет текста на кнопке */
    font-size: 20px; /* размер текста */
    font-weight: bold; /* жирность текста */
    border: 0; /* обнуление рамок */
    outline: none; /* никакой обводки */
}

// Убираем отступ справа у последней кнопки
.button:last-child {
    margin-right: 0;
}

Раскрасим кнопки в разные цвета.

.button_all {
    background-color: #aa0000;
}

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

.button_decor {
    background-color: #c55a71;
}

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

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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