<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

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

Текст, обтекающий картинку нестандартной формы

Текст, обтекающий картинку нестандартной формы

Все начинающие изучать CSS-свойства, уже наверняка слышали про свойство float, с помощью которого текст обтекает картинку справа или слева от нее. На примере ниже, видно как текст обтекает картинку квадратной формы (находящуюся справа от текста).

.astronaut-rest{
    width: 300px; / * ширина картинки * /
    height: 300px; / * высота картинки * /
    float: right; / * обтекание с правой стороны * /
    border: 2px solid white; / * белая сплошная рамка * /
    margin-left: 30px; / * промежуток между текстом и картинкой * /
}


Текст, обтекающий картинку нестандартной формы.

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



Текст, обтекающий картинку нестандартной формы.

CSS shape-outside

Создадим элементарную HTML-разметку с рыбным текстом.

<section>
    <img src="astronaut.png" class="astronaut">
    <h2>Wrap Text Around Images</h2>
    <p>..много рыбного текста..</p>
</section>

и сделаем внешнее оформление.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800&display=swap');
*{
    margin: 0; / * обнуление отступов * /
    padding: 0; / * обнуление полей * /
    box-sizing: border-box; / * на ширину блоков не влияет толщина рамок * /
    font-family: 'Poppins', sans-serif; / * семейство шрифта * /
}
section{
    position: relative; / * относительное позиционирование * /
    width: 100%; / * ширина секции * /
    padding: 50px; / * поля * /
    background: #111; / * цвет фона * /
}
section h2{
    color: #fff; / * цвет шрифта * /
    font-size: 2.5em; / * размер шрифта * /
}
section p{
    color: #fff;
    font-size: 1.2em;
    text-align: justify;
}
.astronaut{
    height: 500px;
    float: left;
}

А дальше произойдет магия, мы добавим всего одно свойство shape-outside, а в качестве значения укажем путь до картинки. Свойство shape-outside повторяет форму изображения, вокруг которого обтекает текст. Обратите внимание, чтобы текст не прилипал к картинке, нужно прописать ещё одно редко-используемое свойство shape-margin.

.astronaut{
    ...
    ...
    shape-outside: url(astronaut.png); / * определяет форму изображения * /
    margin-right: 20px;
    shape-margin: 20px; / * промежуток между силуэтом и текстом * /
}


Текст, обтекающий картинку нестандартной формы.

Всем начинающим верстальщикам, необходимо выучить самые основный CSS-свойства, как азбуку. Переходите по ссылке и вы узнаете почему это так важно, видеокурс "Вёрстка сайта с нуля 2.0"

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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