Думайте нестандартно, а CSS не має форми

CSS базується на коробковій моделі. Якщо у вас є зображення, яке є колом, навколо якого ви хочете обернути текст, воно обернеться навколо обмежувального поля зображень.

Форма зовні

Нова властивість CSS під назвою shape-outside дозволяє обертати текст, який відповідає формі вашого зображення.

Що таке зовнішня форма

Shape-outside - це нова властивість CSS, яка змінює форму елементів, які загортаються. Замість того, щоб обмежуватись прямокутним обмежувальним полем навколо зображення, зовнішня форма дозволяє нам формувати вміст відповідно до зображення.

Ось як MDN описує зовнішню форму:

Форма зовнішньої CSS властивість використовує значення форми , щоб визначити область з плаваючою точкою для поплавка і викликатиме вбудоване зміст , щоб обернути навколо форми , а не обмежує рамки поплавка.

Найголовнішим винятком з цього опису є те, що ця нова властивість застосовується до зображень, що використовують поплавок. Властивість CSS-shape-outside контролює, як текст обертається навколо будь-якого плаваючого зображення. Обернутий текст може мати форму кола, еліпса, прямокутника чи багатокутника.

Використання зовнішньої форми

Властивість shape-outside приймає «основну форму» і застосовує до неї функцію shape. Функція фігури використовується для зміни форми площі поплавця фігури. Властивість CSS-shape-outside надає функціонал для створення таких функцій фігури:

  • коло
  • еліпс
  • багатокутник
  • прямокутник
  • url

Зображення можна розташувати з цими значеннями. Значення додаються в кінці:

  • margin-box
  • прокладка
  • бордюр

Зображення повинно мати внутрішні розміри. Ви повинні встановити висоту та ширину елемента. Це буде використано функцією фігури для створення системи координат, яка використовується при обтіканні тексту навколо зображення.

Коло

Circle () - одне з функціональних значень, що надається із закріпленням форми. Повне позначення для кола () - це коло (r при cx cy), де r - радіус кола, а cx і cy - координати центру кола. Якщо їх опустити, центр зображень буде використовуватися як значення за замовчуванням.

Ось приклад використання зовнішньої форми на колі:

.circle { height: 200px; width: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: circle(); shape-outside: circle();}

Еліпс

Еліпс - це варіація кола, де предмет видовжений на горизонтальній або вертикальній осі. Повне позначення еліпса () - це еліпс (rx ry при cx cy), де rx і ry - радіуси еліпса, а cx і cy - координати центру еліпса.

Ось приклад використання зовнішньої форми на еліпсі:

.ellipse { width: 100px; height: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: ellipse(50px 100px at 50% 50%); shape-outside: ellipse(50px 100px at 50% 50%);}

Багатокутник

Функція багатокутника забезпечує необмежений діапазон фігур. Повний запис полігону () - це багатокутник (x1 y1, x2 y2,…)де кожна пара задає координати xy для вершини багатокутника. Для використання функції polygon () потрібно вказати мінімум 3 пари вершин.

Багатокутник використовується із кліп-шляхом. Властивість CSS clip-path створює область відсікання, яка визначає, яку частину елемента слід відображати. Відображається все, що знаходиться всередині регіону, а те, що знаходиться зовні, приховане.

Ось приклад використання зовнішньої форми для створення двох фігур трикутника, і текст протікає між ними:

.leftTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}.rightTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 0 5px 25px; float: right; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}

Підтримка браузера

Формування CSS підтримується переважно Chrome, Opera та Safari.

Отримайте код

Код усіх прикладів можна знайти в моєму репозиторії github тут.

Більше статей

Дякую, що прочитали мою статтю. Якщо вам це подобається, натисніть на піктограму плескання внизу, щоб інші знайшли статтю. Ось ще кілька моїх статей, які можуть вас зацікавити:

Ось 5 макетів, які ви можете зробити за допомогою FlexBox

Ширина - перший пошук у JavaScript

Шаблони інстанціації в JavaScript