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

 

Пост обновлён и дополнен. 

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

Используя свойство shape-outside можем задать различные значения.
Базовыми вещами являются «основные фигуры». Они имеют следующие функции:

circle()  - круг; ellipse() - эллипс или  овал; polygon() – многоугольник.

Я  для примера предложу вам готовые коды, чтобы было понятно и просто реализовать их на странице блога. Кого это заинтересует более детально, информации в сети достаточно.. 

1. В первом примере ниже будем  использовать shape-outside чтобы изогнуть текст вокруг  изображения. Вот так это будет выглядеть на страничке. Картинка при этом любая.

Код такой 

<style>

.circle {

float: left;

shape-outside: circle(50%);

clip-path: circle(50%); /*Для картинки*/

}

</style>

<img src="адрес картинки" class="circle">

<p>

текст текст текст 

</p>

2. Обтекание овального изображения

Для создания  эллипса или овала, используем функцию ellipse():
Обычно значения для радиуса задаются по осям X и  Y.

Весь код

<style>
.ellipse {
float: left;
shape-outside: ellipse(35% 50%);
clip-path: ellipse(35% 50%); /* Для картинки */
}
</style>


<img src="адрес картинки" class="ellipse">
<p>
текст текст текст
</p>

3. Любая фигура. Сделаем просто многоугольник.

Все точки фигуры тоже задаются по осям.

Код такой

<style>
.polygon {
float: left;
shape-outside: polygon(0% 80%, 100% 50%, 50% 0%);
clip-path: polygon(0% 80%, 100% 50%, 50% 0%); /* для картинки */
}
</style>
<img src="адрес картинки" class="polygon">
<p>
текст текст текст
</p>

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

shape-outside: polygon(0% 80%, 100% 50%, 50% 0%);
clip-path: polygon(0% 80%, 100% 50%, 50% 0%);

Обратите внимание, что они должны быть одинаковые для текста и изображения. Всё это делаем прямо в редакторе сообщений, перейдя в режиме HTML.

Есть масса вариантов создания таких эффектов. Было бы желание. Попробуйте сами.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email