<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

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

Для закрепления материала из уроков к ним идёт множество упражнений.

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

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

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

Подпишитесь на мой канал на 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):

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