BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2017-06-23 / Вр:09:55 / просмотров: 992

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

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

А вот с применением 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>

Результат:

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

Если хотите, чтобы картинка приняла ту же форму, тогда используйте правило «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>

Результат:

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

Эллипс, овал  - 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>

Результат:

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

Многоугольник  - 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>

Результат:

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 773
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4254