Пост обновлён и дополнен.
Всем, доброго времени суток. Очень красиво смотрится на веб - страницы обтекание картинки текстом. При стандартном варианте, даже если ваша картинка имеет круглую форму или форму какой - то фигуры, текст будет располагаться как обычно. Наверняка вы видели на многих сайтах, когда текст полностью обтекает картинку по её фигуре. И это легко реализуется с помощью CSS.
Используя свойство shape-outside можем задать различные значения.
Базовыми вещами являются «основные фигуры». Они имеют следующие функции:
Я для примера предложу вам готовые коды, чтобы было понятно и просто реализовать их на странице блога. Кого это заинтересует более детально, информации в сети достаточно..
1. В первом примере ниже будем использовать shape-outside чтобы изогнуть текст вокруг изображения. Вот так это будет выглядеть на страничке. Картинка при этом любая.
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. Любая фигура. Сделаем просто многоугольник.
Все точки фигуры тоже задаются по осям.
Используя свойство 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>
В последнем варианте можно задать, что взбредёт на ум. Поиграйтесь со значениями
Обратите внимание, что они должны быть одинаковые для текста и изображения. Всё это делаем прямо в редакторе сообщений, перейдя в режиме HTML.
Есть масса вариантов создания таких эффектов. Было бы желание. Попробуйте сами.
<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.
Есть масса вариантов создания таких эффектов. Было бы желание. Попробуйте сами.
здесь можно оформить подписку на новые шпаргалки
