Обтекание текста вокруг изображения с помощью CSS

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

А вот с применением CSS обтекания текста по фигуре:

На сайте этот эффект выглядит вот так:

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

circle()  - круг;

ellipse() - эллипс, овал;

polygon() – многоугольник.

Рассмотрим каждую фигуру на примере.

Круг - circle() 

Если вы хотите сделать обтекание текста по фигуре круга, используйте функцию circle():

shape-outside: circle(50%);

50% - это радиус круга. Вы можете его менять, если нужно.

Полный пример:

<style>
.circle {
float: left;
shape-outside: circle(50%);
}
</style>

<img src="bloggood-ru.png" class="circle">
<p>
In her place one hundred candles burning<br>
A salty sweat drips from her breast<br>
Her hips move and I can feel what they're saying, swaying<br>
They say the beast inside of me's gonna get ya, get ya, get...<br>
Black lipstick stains her glass of red wine<br>
I am your servant, may I light your cigarette?<br>
Those lips smooth, yeah I can feel what you're saying, praying<br>
They say the beast inside of me's gonna get ya, get ya, get...<br>
I beg to serve, your wish is my law<br>
Now close those eyes and let me love you to death<br>
Shall I prove I mean what I'm saying, begging<br>
I say the beast inside of me's gonna get ya, get ya, get...<br>

Let me love you too
Let me love you to death
Hey am I good enough<br>
For you?<br>
...
</p>

Результат:

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

shape-outside: circle(50%);
clip-path: circle(50%);

Пример:

<style>
.circle {
float: left;
shape-outside: circle(50%);
clip-path: circle(50%); /* Если хотите, чтобы картинка приняла ту же форму */
}
</style>

<img src="bloggood-ru.png" class="circle">
<p>
In her place one hundred candles burning<br>
A salty sweat drips from her breast<br>
Her hips move and I can feel what they're saying, swaying<br>
They say the beast inside of me's gonna get ya, get ya, get...<br>
Black lipstick stains her glass of red wine<br>
I am your servant, may I light your cigarette?<br>
Those lips smooth, yeah I can feel what you're saying, praying<br>
They say the beast inside of me's gonna get ya, get ya, get...<br>
I beg to serve, your wish is my law<br>
Now close those eyes and let me love you to death<br>
Shall I prove I mean what I'm saying, begging<br>
I say the beast inside of me's gonna get ya, get ya, get...<br>

Let me love you too
Let me love you to death
Hey am I good enough<br>
For you?<br>
...
</p>

Результат:

Эллипс, овал  - ellipse()

Чтобы создать форму эллипса или овала, используйте функцию ellipse():

Значения для радиуса задаются по оси X и оси Y.

shape-outside: ellipse(X Y);

Пример:

<style>
.ellipse {
float: left;
shape-outside: ellipse(30% 50%);
clip-path: ellipse(30% 50%); /* Если хотите, чтобы картинка приняла ту же форму */
}
</style>

<img src="bloggood-ru.png" class="ellipse">
<p>
In her place one hundred candles burning<br>
A salty sweat drips from her breast<br>
Her hips move and I can feel what they're saying, swaying<br>
They say the beast inside of me's gonna get ya, get ya, get...<br>
Black lipstick stains her glass of red wine<br>
I am your servant, may I light your cigarette?<br>
Those lips smooth, yeah I can feel what you're saying, praying<br>
They say the beast inside of me's gonna get ya, get ya, get...<br>
I beg to serve, your wish is my law<br>
Now close those eyes and let me love you to death<br>
Shall I prove I mean what I'm saying, begging<br>
I say the beast inside of me's gonna get ya, get ya, get...<br>

Let me love you too
Let me love you to death
Hey am I good enough<br>
For you?<br>
...
</p>

Результат:

Многоугольник  - polygon()

Эта функция помогает создать любую форму с тремя или более вершинами:

shape-outside: polygon(Х Y, Х1 Y1, Х2 Y2,… Х9 Y9);

Точки фигуры также строятся по осям Х Y
Для примера я построю треугольник.

Пример:

<style>
.polygon {
float: left;
shape-outside: polygon(0% 80%, 100% 80%, 50% 0%);
clip-path: polygon(0% 80%, 100% 80%, 50% 0%); /* Если хотите, чтобы картинка приняла ту же форму */
}
</style>

<img src="bloggood-ru.png" class="polygon">
<p>
In her place one hundred candles burning<br>
A salty sweat drips from her breast<br>
Her hips move and I can feel what they're saying, swaying<br>
They say the beast inside of me's gonna get ya, get ya, get...<br>
Black lipstick stains her glass of red wine<br>
I am your servant, may I light your cigarette?<br>
Those lips smooth, yeah I can feel what you're saying, praying<br>
They say the beast inside of me's gonna get ya, get ya, get...<br>
I beg to serve, your wish is my law<br>
Now close those eyes and let me love you to death<br>
Shall I prove I mean what I'm saying, begging<br>
I say the beast inside of me's gonna get ya, get ya, get...<br>

Let me love you too
Let me love you to death
Hey am I good enough<br>
For you?<br>
...
</p>

Результат:

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: css, эффекты для сайта