Как сделать текст рядом с картинкой

Каким вы представляете себе миллионера? Личный самолет, коллекция автомобилей, роскошные яхты — вот, согласно расхожему мнению, непременные атрибуты богатства.

Какое самое лучшее вино, как его хранить и чем он полезен
Вино пили с незапамятных времен, пьют сейчас и будут пить всегда. Неудивительно, что оно так любимо и популярно среди всех народов и наций. Это все временной и не имеющий национальности напиток. Конечно, употребляли его всегда по-разному.

Как с годами не потерять эмоциональной близости и не охладеть друг к другу в постели?
Все в конце концов надоедает. Даже секс. Даже великолепный. Даже с самым любимым и близким человеком на свете — с собственным мужем. А если эта нить утеряна, то во что бы то ни стало ее найти.

Магия CSS: Обтекание текста вокруг нестандартных форм

Всем привет, меня зовут Анна Блок, я запускаю серию уроков посвященную CSS. Это скорее продвинутый уровень, когда ты уже что-то знаешь о нем. Однако, поверь, в CSS есть еще много интересного и, возможно, в этой серии уроков ты узнаешь что-то новое и захочешь применить в своей работе.
Назовем эту рубрику «Магия CSS». Думаю, это точно описывает то, о чем я буду рассказывать. Освоив эту магию тебя уже не будут пугать макеты дизайнеров, которые решили поддаться своей фантазии, ты сможешь воплотить все что угодно. Эта статья будет посвящена тому, как создать нестандартное обтекание текста. Узнаешь о некоторых свойствах CSS, которые наверняка редко используешь в работе.
Если ты хоть немного прокачан в CSS, то я более чем уверена, что ты знаешь, как решить эти задачи. Например, как сделать обтекание текста вокруг прямоугольной картинки.

Подсказка: да, ты правильно думаешь, здесь нужно использовать float .
Также, я более чем уверена, что ты знаешь как поставить текст, который располагается в три колонки.

Подсказка: безусловно, здесь можно использовать Flexbox или Grid CSS.
Ну и конечно же, наверняка, большинство из вас знают как сделать так, что бы текст продолжался в три колонки, либо на большее их количество.

Подсказка: но, если кто-то не знает, то я подскажу. Здесь вы можете использовать несколько свойств в связке column-width , column-count и column-rule .
Согласитесь, это не самые интересные примеры. Именно поэтому я не хочу писать статьи со стандартными решениями, о которых знают все (или почти все). Гораздо интереснее давать ответы на нестандартные задачи. Например, как сделать так, чтобы текст, как бы вырисовывал своей формой некую фигуру? Знаешь ответ?
Если нет, то читай статью дальше.

Задача 1

Первый пример будет посвящен тому, что мы создадим вот такое нестандартное решение.

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

Сделаем HTML-разметку. Для начала создадим общий div и назовем его container . В нем создадим пустой div с классом shaped и div с классом content ,где будет наш текст.
После этого переходим к CSS. Начнем со стилизации блока container задав ему свойства высоты и ширины:

height: 100vh; wight: 100vw;

Далее мы будем стилизовать shaped . Устанавливаем цвет background-а и картинку:

background: black url(https://pp.userapi.com/c849120/v849120857/cc331/XftS2mpmwHo.jpg) center top no-repeat;

center — устанавливаем изображение по центру;
top — устанавливаем изображение сверху по оси Y;
no-repeat — без повтора.

height: 100vh;

Используем ширину, но берем значение не 100vw , а например 40vw :

width: 40vw;

Растягиваем изображение по всему контейнеру:

background-size: cover;

Теперь давайте используем свойство к которому мы все привыкли:

float: right;

Дальше мы будем работать с 3 свойствами, с которыми вы, возможно, работаете очень редко, это: shape-outside , shape-margin и clip-path .
Мы должны создать SVG при помощи CSS. Для этого нам необходимо создать многоугольник, его мы можем создать при помощи свойства polygon , ему мы задаем координаты откуда и до куда должны вырисовываться отрезки для того что бы нарисовать этот многоугольник:

shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);

shape-margin: 20px;

И последнее заключающее, что мы должны сделать, это использовать свойство clip-path , внутри которого мы используем те же значения polygon , которые прописывали ранее:

clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);

Ознакомиться подробнее с HTML и CSS можно тут:

Задача 2

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

В данном примере картинку разместим в HTML. Для этого указываем тег img с классом circle и прописываем путь к картинке. Затем добавляем наш текст.
Теперь переходим к CSS и будем стилизовать наш класс circle .
Выравниваем изображение по левому краю:

float: left;

shape-outside: circle(50%);

Задаем размеры изображению:

width: 400px; height: 400px;

Ознакомиться подробнее с HTML и CSS можно тут:

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

Задача 3

Теперь давай поговорим о том, как сделать вот такой пример:

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

Во-первых, отрисуем SVG при помощи тегов HTML. Пишем тег svg , внутри него пишем атрибут viewBox со значениями «0 0 100 100». Далее внутри пишет тег circle с радиусом r=»48″ и координатами cx=»50″ , cy=»50″ . Создаем тег foreignObject с атрибутами id=»text» , width=»100″ , height=»100″ . Внутри него прописываем два пустых div-а с классами shape shape-left и shape shape-right . А также третий div с классом text внутри которого будут теги h1 и p . Переходим к CSS.
Для начала зададим стили body :

height: 100vh; margin: 0; display: flex;

Зададим стили для svg:

margin: auto; width: 50%; max-width: 100%;

Делаем заливку тегу circle :

fill: red;

Добавляем высоту, ширину и внутренние отступы для класса shape :

height: 100%; width: 50px; shape-margin: 3px;

И теперь поработаем над shape shape-left :

float: left; shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/circle-left.svg);

По тому же принципу прописываем стили для shape shape-right

float: right; shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/circle-right.svg);

Дело осталось за малым, нам нужно еще немножко поработать над текстом. Используем класс text :

color: #fff; font-size: 4px; width: 100px; height: 100%; text-align: center; line-height: 1.6; hyphens: auto;

Осталось стилизовать теги h1 и p :

h1 < font-size: 7px; margin-bottom: 5px; padding-top: 10px; text-align: center; >p

Вот таким методом мы смогли сделать так, что бы в нашем круге оказался текст.
Что было сделано:
Мы создали некую фигуру при помощи HTML-тегов, в данном случае это круг. И далее при помощи свойства shape-outside мы задали некие ограничивающие линии, которые не позволили нашему тексту расползтись по всему сайту.

Ознакомиться подробнее с HTML и CSS можно тут:

Итоги:
Итак, это был первый урок из рубрики «Магия CSS» и сегодня мы поговорили о том, как создать обтекание текста вокруг не стандартных форм.

Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

Смотреть видео:

Компьютерная грамотность с Надеждой

Заполняем пробелы — расширяем горизонты!

Обтекание картинки в Ворде: как ее вставить в текст, изменить размер и расположить рядом с текстом

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

p, blockquote 1,0,0,0,0 —>

p, blockquote 2,0,0,0,0 —>

Предположим, надо описать текстом (словами) картину известного художника Шишкина Ивана Ивановича «Утро в сосновом лесу», которую в просторечии называют «Три медведя». Как это сделать в Ворде?

p, blockquote 3,0,0,0,0 —>

Допустим, мы уже сделали описание картины в редакторе Microsoft Word, и теперь хотим в текст нашего описания поместить саму картину, то есть перенести картинку в текст. Начнем вставлять картину (рисунок) сразу после заголовка описания – это место для вставки рисунка мы выделяем с помощью мышки, то есть ставим туда курсор мышки (1 на рис. 1):

p, blockquote 4,0,0,0,0 —>

Рис. 1 (кликните по рисунку для увеличения). Выделяем в тексте место под заголовком статьи для вставки туда картинки (рисунка) из файла.

Как скопировать картинку из Интернета

В редакторе Word предусмотрена возможность вставлять рисунки из готовых файлов. Предположим, что вставляемый рисунок – картина Шишкина И.И. «Утро в сосновом лесу» находится на компьютере, на рабочем столе в папке «Картина Шишкина». Как там эта картина, этот рисунок оказались? Ну, например, мы нашли эту картину, этот рисунок в Интернете и сохранили его себе на компьютер, на рабочий стол.

p, blockquote 5,0,0,0,0 —>

Чтобы сохранить картинку из интернета на свой компьютер (свое устройство):

• Можно по картинке, найденной в интернете, кликнуть левой кнопкой мыши, чтобы она открылась в полном размере. Ничего страшного, если при этом картинка не меняет размер.
• Теперь, оставив курсор мышки на рисунке, надо нажать на ПКМ (правую кнопку мыши).
• Появится меню, в котором надо кликнуть опцию «Сохранить изображение как» или «Сохранить картинку как».
• Откроется окно «Сохранить как», в котором выбираем место, где хотим поместить картинку.
• Остается нажать кнопку «Сохранить».

Вставляемые рисунки в текст могут быть самые разные:

• рисунки (картинки) из Интернета,
• либо рисунки, нарисованные нами с помощью различных редакторов и сохраненные на компьютере,
• присланные картинки (рисунки) по электронной почте
• и т.п.

Главное, чтобы перед вставкой рисунка в текст, этот рисунок был сохранен на компьютере в виде файла. И тогда мы сможем его вставить в текст.

p, blockquote 8,0,0,0,0 —>

Вставка картинки в текст в Ворде

Теперь, когда мы выделили в тексте то место, куда должен быть вставлена картинка (рисунок), переходим к процедуре вставки. Вставка рисунка в текст делается следующим образом. Надо перейти в меню «Вставка» (1 на рис. 2) и кликнуть по иконке «Рисунок» (2 на рис. 2).

p, blockquote 9,0,0,0,0 —>

Рис. 2 (кликните по рисунку для увеличения). Переход к меню «Вставка» и клик по иконке «Рисунок».

Откроется окно «Вставка рисунка», в котором мы должны найти на компьютере рисунок для добавления в Ворд. В рассматриваемом примере рисунок хранится на Рабочем столе в папке «Картина Шишкина».

p, blockquote 10,0,1,0,0 —>

1 на рис. 3 – Находим эту папку,
2 – кликаем по ней левой кнопкой мышки для выделения,
3 на рис. 3 – после чего нажимаем на кнопку «Вставить».

p, blockquote 11,0,0,0,0 —>

Рис. 3 (кликните по рис. для увеличения). Поиск вставляемого рисунка (картинки) на компьютере в окне «Вставка рисунка».

Картинка вставлена в вордовский текст некрасиво

После всех манипуляций, описанных выше, мы видим, что рисунок (он же «картинка») вставлен в текст сразу после заголовка и прямо перед первым абзацем (рис. 4).

p, blockquote 12,0,0,0,0 —>

Рис. 4 (кликните по рис. для увеличения). Вид вставленной картинки сразу после завершения вставки рисунка в текст.

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

p, blockquote 13,0,0,0,0 —>

Почему так произошло? Потому что картинка в редакторе Word вставляется вместо одного символа текста, на место одного символа текста. И для Ворда этот рисунок является всего лишь одним единственным символом текста – так «воспринимает» Word картинку, что называется по умолчанию.

p, blockquote 14,0,0,0,0 —>

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

p, blockquote 15,0,0,0,0 —>

Например, мы можем поставить курсор перед заглавной буквой «У», и затем раз 5-6 нажать на клавишу «Пробел». Между вставленной картинкой и началом абзаца появится некий промежуток, который выделен синим цветом для наглядности (1 на рис. 5).

p, blockquote 16,0,0,0,0 —>

Рис. 5 (кликните по рис. для увеличения). Отделение вставленной картинки от текста пробелами.

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

p, blockquote 17,0,0,0,0 —>

Нам обычно представляют рисунок отдельно от текста, либо текст как бы «обтекает» картинку, заполняя собой все свободное от картинки пространство на листе. А на свободном поле листа справа от рисунка мы видим только первую строку абзаца. Выше, на рисунках 4 и 5, справа от картинки мы видим пустоту. Так не делают…

p, blockquote 18,0,0,0,0 —>

Отделение картинки от текста в Ворде

Давайте попробуем для начала отделить рисунок от текста вообще. Для этого убираем все пробелы между картинкой буквой «У» в начале абзаца (то есть возвращаемся к виду, как показано на рис. 4).

p, blockquote 19,0,0,0,0 —>

Затем ставим курсор перед буквой «У» и нажимаем на клавишу «Enter» — текст абзаца начнется с новой строки, а рисунок останется на своем месте (рис. 6).

p, blockquote 20,0,0,0,0 —>

Рис. 6 (кликните по рис. для увеличения). Отделение вставленного рисунка от текста с помощью клавиши «Enter».

Что же, неплохо получилось, уже смотрится и читается значительно лучше. Правда, картинка расположена по-прежнему в левой части страницы, а справа от нее «зияющая пустота»!

p, blockquote 21,1,0,0,0 —>

Что делать? Можно оставить и так. А можно, например, поместить рисунок в центр страницы. Как это сделать? Нужно:

• выделить строку, в которой находится картинка, как мы обычно выделяем текст в Ворде – мы увидим, как рисунок «посинел», как обычно синеет выделяемые в редакторе Word текст (1 на рис. 7),
• а затем нажать на кнопку форматирования текста по центру (2 на рис. 7).

Рис. 7 (кликните по рис. для увеличения). Выделение строки с вставленной картинкой и последующее ее перемещение на середину строки (по центру)

И вот, случилось то, что мы хотели! Рисунок теперь размещен по центру страницы (рис. 8).

p, blockquote 23,0,0,0,0 —>

Рис. 8 (кликните по рис. для увеличения). Вставленная картинка размещена посредине страницы.

Получается, что со вставленной картинкой можно (и даже нужно!) работать как с обычным текстом. И тогда рисунок будет «подчиняться» нашим желаниям, становясь на то место, куда мы его хотим «определить»! В данном случае картинка расположится посредине строки над первым абзацем текста.

p, blockquote 24,0,0,0,0 —>

То есть, обладая умением форматировать текст, мы можем применить наши знания и опыт для такого же форматирования рисунков. Уже неплохо, правда, же?! Например, можно выделить картинку, как мы обычно выделяем текст, зацепить картинку левой кнопкой мышки и перетащить картинку в любое место нашего текста.

p, blockquote 25,0,0,0,0 —>

Скриншот данного действия (выделить рисунок, зацепить и переместить в любое другое место текста) я не делаю. Можете попробовать это сделать самостоятельно, чтобы ощутить «свою власть» над картинкой. Не такой он страшный, этот вставленный рисунок, как его малюют! С картинкой в тексте можно делать все (или почти все), что мы умеем делать с текстом, с отдельными словами текста и даже с отдельными буквами и символами текста!

p, blockquote 26,0,0,0,0 —>

Изменение размера картинки в Ворде

На рис. 8 видно, что рисунок вставлен в текст как-то «не к месту», что ли. Возможно, это ощущение создается из-за маленького размера картинки. А что если рисунок увеличить в размере?

p, blockquote 27,0,0,0,0 —>

Как увеличить или уменьшить размер вставленной в текст картинки? Для этого нужно:

• как обычно сначала выделить рисунок однократным кликом по ней левой кнопкой мышки – вокруг рисунка появится рамка с кружочками в углах и посредине каждой стороны, за которые можно рисунок «цеплять» и изменять его размеры,
• зацепить вставленный в текст рисунок за любой его угол и потянуть наружу для увеличения размера картинки или внутрь для уменьшения размера картинки.

По мере изменения размера рисунка он будет как бы «наползать» на текст (рис. 9), но это не страшно, поскольку это лишь процесс растягивания или сжатия картинки, а не окончательный результат.

p, blockquote 29,0,0,0,0 —>

Рис. 9 (кликните по рис. для увеличения). Растягивание (увеличение размера) или сжатие (уменьшение размера) картинки, вставленной в текст.

После того, как мы отпустим левую кнопку мышки, рисунок станет того размера, каким мы его сделали. Остальной текст будет отодвинут от увеличившейся картинки или придвинут к уменьшившейся картинке. И так можно многократно менять размер рисунка, пока он не станет таким, каким мы его хотим видеть. Например, на рис. 10 рисунок расположен на всю ширину текста на странице.

p, blockquote 30,0,0,0,0 —>

Рис. 10 (кликните по рис. для увеличения). Увеличение размера вставленной картинки (рисунка) в редакторе Microsoft Word.

Обтекание картинки текстом в Ворде

Вышеперечисленные манипуляции с текстом и картинкой, вставленной в текст, не позволили нам заполнить текстом правую часть листа, то есть, справа от вставленного рисунка. Мы лишь смогли отделить текст от картинки, а картинку увеличили в размере, чтобы заполнить «пустоту».

p, blockquote 31,0,0,0,0 —>

Но далеко не всегда подобное форматирование делает текст с рисунками привлекательным, читабельным. Давайте посмотрим, как все-таки можно «соединить» картинку и текст воедино так, чтобы было и красиво, и лист был бы равномерно заполнен.

p, blockquote 32,0,0,1,0 —>

Предлагаю вернуться к состоянию, показанному на рис. 4, когда у нас был вставленный рисунок, и сразу после него начинался первый абзац текста. Затем нужно:

• выделить рисунок кликом левой кнопки мышки по нему,
• после чего, не сдвигая курсор мышки с картинки, кликнуть уже правой кнопкой мышки,
• появится контекстное меню, которое показывает, что мы можем сделать с этим рисунком (а сделать мы можем много чего!)
• выбираем из меню опцию «Обтекание текстом» (1 на рис. 11),
• далее из появившегося меню вариантов обтекания картинки текстом выбираем «По контуру» (2 на рис. 11).

Рис. 11 (кликните по рис. для увеличения). Варианты обтекания текста вокруг картинки.

Именно такой вариант обтекания текста («по контуру») обеспечит нам расположение текста на свободном поле листа справа от рисунка (рис. 12). Что и требовалось сделать!

p, blockquote 34,0,0,0,0 —>

Рис. 12 (кликните по рис. для увеличения). Обтекание картинки в Ворде – расположение текста на свободном поле листа справа от вставленного рисунка (картинки).

Однако, в меню вариантов обтекания текстом рисунка (рис. 11) мы видим и другие варианты. Можете попробовать их самостоятельно, чтобы наглядно посмотреть, что получается с текстом и картинкой.

p, blockquote 35,0,0,0,0 —>

Например, вариант обтекания «Перед текстом» позволят «закрыть» рисунком часть текста. Текст будет размещен как бы под картинкой, его не будет видно. А вариант обтекания «За текстом», наоборот, размещает текста поверх рисунка. Текст будет, как бы, написан поверх картинки. Ну, и так далее, для разных случаев жизни, для разных вариантов совместного форматирования текста и рисунков, для форматирования текстов с картинками.

p, blockquote 36,0,0,0,0 —>

Остается только писать тексты и сопровождать их рисунками. Остальное сделает за нас текстовый редактор Microsoft Word, или как его иногда называют «текстовый процессор». Не совсем «текстовый», раз может работать и с картинками, не правда ли?!

p, blockquote 37,0,0,0,0 —>

Видео Обтекание картинки в Ворде: как вставить в текст, изменить размер и расположить слева от текста

p, blockquote 38,0,0,0,0 —>

p, blockquote 39,0,0,0,0 —>

p, blockquote 40,0,0,0,0 —>

p, blockquote 41,0,0,0,0 —>

p, blockquote 42,0,0,0,0 —> p, blockquote 43,0,0,0,1 —>