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

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

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


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

Пример:

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

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

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

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

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

Заходим в админку 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