Как сделать обтекание картинки текстом в css
Перейти к содержимому

Как сделать обтекание картинки текстом в css

  • автор:

Магия 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 в режиме онлайн.

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

Как сделать обтекание картинки текстом в css

чилка HTML

Динамический HTML

Справочники

Изображение

Вставка на страницу изображения графического формата производится с помощью
тэга с обязательным атрибутом src.

Атрибуты тэга

— для прекращения обтекания текстом изображений, выровненых по левому краю.
— для прекращения обтекания текстом изображений, выровненых по правому краю.
— для прекращения обтекания текстом изображений, выровненых либо по левому краю, либо по правому краю.
Обтекание картинок текстом в HTML

Пример 1
Изображение без подписи

Пример 2
Для изображения с подписью

Подпись к картинке

Подпись

Для изображения с подписью надо заключить картинку и ее описание в блок

Обтекание картинки текстом HTML CSS (SCSS)

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

#content < margin-left: $widthMenu; margin-right: $widthMenu; min-height: 100vh; .post < background-color: #eee; margin-bottom: 10px; box-shadow: 0 0 3px #333; border-radius: 3px; //$Border padding: 15px; min-height: 50%; font-family: cambria; img < //height:300px; box-shadow: 0 0 3px #333; margin: 10px; float: left; border: 7px solid #eee; width: 50%; vertical-align: top; max-width: 250px; >.img < box-shadow: 0 0 3px #333; margin: 10px; border: 7px solid #eee; width: 100px; ; height: 100px; ; background-size: cover; //max-width:250px; vertical-align: top; >.title < font-size: 27px; color: #777; text-shadow: 0 0 1px #333; transition: 0.3s; font-family: cambria; &:hover < text-shadow: 0 0 3px #333; cursor: pointer; >> p < margin: 5px; >.postFutter < margin-top: 7px; text-align: right; a < color: #aaa; >> > >
HTML 
Кубизм

Took me two hours, got the 4 minute speedrun trophy under two seconds short of the limit after countless of restarts. Very satisfying once you finally succeed. For two dollars it's a fantastic game at a fantastic prize (on the US store, EU was 3€)


Коментарів (0) | Дата: 21.06.2021

Решение желательно на css Весь проект

Изображения в тексте

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

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег помещается в контейнер

, для которого устанавливается атрибут align=»center» . Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig , и применим его для нужных абзацев, как показано в примере 1.

Пример 1. Выравнивание рисунка по центру

    Рисунок по центру    

В данном примере класс fig добавляется к селектору P , а способ выравнивания определяется свойством text-align . Положение рисунка относительно текста схематично показано на рис. 1.

Рис. 1. Рисунок в центре колонки текста

Обтекание рисунка текстом

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега есть атрибут align , который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right , для выравнивания по левому краю применяют left . Атрибут align часто используют в связке с другими атрибутами тега — vspace и hspace . Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега

    Рисунок в тексте  

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

Для обтекания картинки текстом также можно применить стилевое свойство float . Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left , наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

    Рисунок в тексте      

В данном примере к тегу добавляется класс fig , для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom .

Рисунок на поле

При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin .

Применение таблиц

Пример 4. Создание рисунка на поле с помощью таблиц

    Рисунок на поле    
Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу.

Результат примера показан на рис. 4.

Изображение слева от текста

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.

Использование стилей

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic , а текст, сильно не мудрствуя, в слой text . Теперь для слоя piс следует установить свойство float со значением left , а для text — margin-left . Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

Пример 5. Использование margin

    Рисунок на поле    

Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.

Если рисунок следует расположить справа от текста, то значение float меняем на right , а свойство margin-left на margin-right .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *