Привет, друзья! Сегодня мы продолжаем вникать в глубины последних CSS модулей. Они интересные, с их помощью можно делать нестандартные вещи, но они не всегда хорошо поддерживаются браузерами. На этот раз погрузимся в интересный мир CSS Shapes, модуль 1, а именно свойство shape-outside.
#
CSS Shapes, module level 1
Первый модуль CSS Shapes включает в себя только свойство shape-outside и сопутствующие shape-margin, clip-path и shape-image-threshold.
Они позволяют сделать контейнер элемента не прямоугольным, а придать ему желаемую форму с помощью нескольких shape-функций:
- circle() — правильная окружность;
- ellipse() — эллипс с двумя радиусами;
- polygon() — полигон из множества точек;
- inset() — внутренний прямоугольник с возможностью скруглить углы;
- url() — форма изображения с прозрачным фоном.
Все этим формы, придавая контейнеру другой вид, позволяют обтекать этот контейнер другим. Понятнее всего будет на картинке и в обзоре.
Вот такая вот загогулина.
Добавить комментарий