
Используя свойство 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%);
clip-path: polygon(0% 80%, 100% 50%, 50% 0%);
Обратите внимание, что они должны быть одинаковые для текста и изображения. Всё это делаем прямо в редакторе сообщений в режиме HTML.
Есть множество возможностей создания таких эффектов. Попробуйте сами.
здесь можно оформить подписку на новые шпаргалки
Спасибо! Актуально перед новогодними праздниками.
ОтветитьУдалитьТатьяна, кстати ДА. картинку взяла первую попавшеюся, а идея к празднику мне нравится. хотя кое - что ещё в задумках для читателей у меня есть ещё к празднику.
УдалитьОбязательно попробую. Спасибо, Вика. Интересно.
ОтветитьУдалитьЛюба, ну ты - то обязательно что - то очень интересное придумаешь. Уверена.
ОтветитьУдалитьСпасибо. Это окрыляет.
Удалить