<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Первая буква логотипа Google

Первая буква логотипа Google

На этом уроке мы с вами нарисуем первую букву логотипа Google, используя CSS свойство border и псевдоэлемент.

Цвет логотипа Google

Первым делом определим, из каких цветов состоит логотип Google. Для этого воспользуемся расширением ColorZilla для браузера Chrome. Введите в поиск Google logo и возьмите пипеткой все цвета:

  • красный - #e33e2b;
  • желтый - #f1b401;
  • зеленый - #2ba14b;
  • синий - #3a7cec;

Первая буква логотипа Google.

HTML разметка

HTML разметка состоит всего из одного блока. Хотя у самого логотипа намечается два элемента (разноцветный полукруг и синий закругленный блок). Просто один из элементов необязательно прописывать непосредственно в разметке, а можно отобразить его с помощью псевдоэлемента before.

<div class="google_logo"></div>

Рисуем синий блок

Весь блок строится на бордерах (border). Для верхней, правой и нижней стороны блока, зададим рамку толщиной 50 пикселей. Фокус в том, что левую сторону блока оставим вообще без рамки и применим скругление только для правого нижнего угла.

.google_logo {
    width: 125px; /* ширина блока */
    height: 150px; /* высота блока */
    position: relative; /* позиция родителя */
    border-top: 50px solid #3a7cec;
    border-right: 50px solid #3a7cec;
    border-bottom: 50px solid #3a7cec;
    border-radius: 0 0 250px 0; /* закругляем один угол */
}

Первая буква логотипа Google.

Первая буква логотипа Google.

Рисуем разноцветный полукруг

Вторую часть логотипа отрисуем при помощи псевдоэлемента before, который спозиционируем относительно его родителя google_logo. Главная фишка этого блока состоит в прозрачной правой рамки - у свойства border-right будет прозрачный цвет (transparent).

Другой способ получения прозрачности, это задать любой цвет через rgba с нулевым альфа-каналом.
rgba(255.255,255,0;)


.google_logo::before {
    display: block; /* это блочный элемент */
    content: '';
    width: 250px; /* ширина блока */
    height: 250px; /* высота блока */
    border-top: 50px solid #e33e2b; /* верхняя рамка */
    border-left: 50px solid #f1b401;/* левая рамка */
    border-bottom: 50px solid #2ba14b; /* нижняя рамка */
}
Первая буква логотипа Google.

Закругляем все углы бордеров и позиционируем псевдоэлемент относительно его родителя. Наложим цветной полукруг на синий элемент и в результате получим букву G.

.google_logo::before {
    border-radius: 200px; /* закругление */
    position: absolute; /* позиционирование */
    right: -50px; /* правая координата */
    top: -150px; /* верхняя координата */
}

Первая буква логотипа Google.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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