текст обтекающий картинку

Обтекающий текст

Как сделать на сайте так, чтобы текст обтекал картинку (или картинка обтекала текст), для примера возьмем картинку сложной формы (не прямоугольник) и заставим текст обтекать её.


Скачать исходники для статьи можно ниже

Пример:

текст обтекающий картинку

Для примера вам понадобятся картинки, можете скачать их с помощью правой клавиши мыши:

перенос сайта с Денвера на хостинг

обтекающий текст на сайте

Попробуем воссоздать данный пример!

Заходим в админку wordpress и как обычно создаем «Запись» — заходим в пункт «Записи», подпункт «Добавить новую» и вводим нужный нам текст:

как сделать обтекающий текст на сайте

Далее выбираем место для картинки и вставляем её, нажав кнопку «Добавить медиафайл», при этом указав в параметрах картинки выравнивание по левому краю:

текст обтекает картинку на сайте

обтекание текстом картинки сложной фигуры

обтекание текста

Аналогично вставляем вторую картинку чуть ниже, только с выравниванием по правому краю.

В итоге у нас получиться что-то вроде этого:

обтекающий текст на сайте

Как видите текст обтекает картинки, однако ровно по линии — но нам нужно сделать красивее!

Для этого нам понадобиться — бесплатное расширения для браузера — CSS Shapes Editor.

Если у вас Яндекс.Браузер или Google Chrome, то установить данное приложение можно здесь:

«chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp»

Теперь вернемся к нашему сайту — сохраним и опубликуем создаваемую нами «Запись»:

obtekanie9

Переходим на опубликованную нами запись, наводим курсор мышки на картинку, кликаем правой клавишей мышки и в выпадающем окошке выбираем пункт «Просмотр кода элемента»:

obtekanie10

Далее справа внизу выбираем пункт «Shapes» (по скриншоту ниже можно кликнуть для увеличения):

obtekanie11

В данном пункте («Shapes») кликаем мышкой на плюсик:

obtekanie12

Здесь выбираем «polygon»:

obtekanie13

, а далее редактируем границы рисунка на сайте (по скриншоту ниже можно кликнуть для увеличения):

obtekanie14

Любое ваше изменение границ рисунка будет фиксироваться в коде, а именно: будут прописываться дополнительные стили к картинке — вот их и нужно будет скопировать (по скриншоту ниже можно кликнуть для увеличения):

obtekanie15

Теперь возвращаемся к редактированию нашей «Записи» через админку wordpress, открываем вкладку «Текст» (вместо вкладки «Визуально»):

obtekanie16

и добавляем к ней скопированные нами стили:

obtekanie17

И сохраняем изменения в «Записи».

Теперь переходим на сайт, открываем «Запись» и смотрим результат:

obtekanie18

Аналогичные действия проделываем и со второй картинкой.

На этом все! Красивых вам сайтов!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc