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

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


5 комментариев:

  1. Спасибо! Актуально перед новогодними праздниками.

    ОтветитьУдалить
    Ответы
    1. Татьяна, кстати ДА. картинку взяла первую попавшеюся, а идея к празднику мне нравится. хотя кое - что ещё в задумках для читателей у меня есть ещё к празднику.

      Удалить
  2. Обязательно попробую. Спасибо, Вика. Интересно.

    ОтветитьУдалить
  3. Люба, ну ты - то обязательно что - то очень интересное придумаешь. Уверена.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo