Хочу предложить вам интересный эффект на 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>
Результат:
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330346 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274701 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222533 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187740 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
Добавить комментарий
Метки: css, эффекты для сайта
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐