<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать вкладки на чистом CSS

Как сделать вкладки на чистом CSS

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

HTML код

Сначала создадим обертку для вкладок с классом wrap. Затем блок для вкладок tabs, навигацию для переключения вкладок tabs__items, вкладки-ссылки tabs__item. В адресах ссылок пропишем названия-якоря и точно такие же названия укажем в идентификаторах у текстовых блоков, таким образом связав их между собой. Далее создадим три блока с содержимым табов tab__box.

<div class="wrap">
  <div class="tabs">
    <nav class="tabs__items">
      <a href="#tablink_01" class="tabs__item"><span>Вкладка #1</span></a>
      <a href="#tablink_02" class="tabs__item"><span>Вкладка #2</span></a>
      <a href="#tablink_03" class="tabs__item"><span>Вкладка #3</span></a>
    </nav>
    <div>
      <div id="tablink_01" class="tab__box">
        рыба-текст
      </div>
      <div id="tablink_02" class="tab__box">
        рыба-текст
      </div>
      <div id="tablink_03" class="tab__box">
        рыба-текст
      </div>
    </div>
  </div>
</div>

CSS код

Сделаем для обертки отступ сверху, ограничим ее по ширине и расположим по середине.

.wrap {
    padding: 40px 0;
    max-width: 900px;
    margin: 0 auto;
}

Сделаем оболочку для табов флекс-контейнером, для построения табов в один ряд.

.tabs__items {
    display: flex;
}

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

.tabs__item {
    flex: 0 1 33.333%; // управление размерами вкладок
    height: 50px; // высота вкладок
    display: flex;
    justify-content: center; // центрирование по горизонтали
    align-items: center; // центрирование по вертикали
    text-transform: uppercase; // перевод в верхний регистр
    color: #fff; // цвет ссылок
    text-decoration: none; // убираем подчеркивание ссылок
}

Изначально все вкладки нужно спрятать.

.tab__box {
    position: relative; // относительное позиционирование
    padding: 20px; // внутренние отступы
    font-size: 18px;
    line-height: 24px;
    display: none; // вкладки скрыты
}

Как добиться, чтобы при нажатии на вкладку, показалось ее содержимое? Поможет нам псевдо-класс :target, который при клике по цели, применит заданный стиль к элементу с якорем.

.tab__box:target {
    display: block; // покажет содержимое при клике
}

Мы хотим, чтобы при клике, сам таб и бокс с контентом меняли цвет фона и здесь без псевдоэлемента никак не обойтись. Создадим для вкладок с контентом пустые блоки при помощи псевдоэлемент :before.

.tab__box:before {
    content: "";
    height: 50px;
    width: 33.333%;
    position: absolute;
    top: -50px;
}

Покрасим все блоки в два разных цвета, обратившись к каждому через псевдокласс :nth-child.

.tab__box:nth-child(1) {
    background-color: #3fc1c9;
}
.tab__box:nth-child(1):before {
    background-color: #3fc1c9;
    left: 0;
}
.tab__box:nth-child(2) {
    background-color: #fc5185;
}
.tab__box:nth-child(2):before {
    background-color: #fc5185;
    left: 33.333%;
}
.tab__box:nth-child(3) {
    background-color: #3fc1c9;
}
.tab__box:nth-child(3):before {
    background-color: #3fc1c9;
    right: 0;
}

Цветной фон перекрывает меню навигации, поэтому переместим надпись на слой выше.

.tabs__item span {
    position: relative;
    z-index: 2;
}

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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