Кодинг
★ Рубрика: Кодинг
★ Тема: CSS

Обтекание текстом окружности

Предположим вам понадобилось, чтобы на вашей веб-страничке некоторый текст обтекал изображение по окружности. Если точнее, то текст должен, к примеру, огибать контур изображения.
Фото
Здесь на этой странице как раз и показан такой пример. Картинка слева имеет форму окружности и если сделать классическое обтекание, то получилась бы нестыковка - обтекание прямоугольной формы, а граница - окружность. Согласитесь, представленный здесь вариант обтекания смотрится очень даже стильно. Кроме эстетической составляющей еще и место экономится. Так что для адаптивных шаблонов такой вариант вполне будет востребованным. Попробуйте изменить ширину окна браузера, чтобы убедиться что обтекание будет работать. В завершение нам остается только привести коды, обеспечивающие такой вариант обтекания текстом окружности. Реализация примера весьма проста. Вам понадобится задать стиль того элемента, который будет "обтекаться" текстом. Ниже приведен пример кода:
.element { 
 float: left;
 shape-outside: circle(50%);
 width: 200px;
 height: 200px;
}
Дальше надо разместить его на вашей странице. В нашем случае, это следующий код:
< div class="element">
< img style="width:200px !important;" 
src="/picture/demo/circles.gif" align="center" alt="Фото">
<⁄div>
 Похожие публикации: CSS

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]