Введення в CSS Shapes

Оригінал перекладено Влад Мержевич

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

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

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

Після того, як CSS Shapes отримали широку підтримку в сучасних браузерах, варто розглянути гнучкість та функціональність, які надає CSS Shapes. Це допоможе зрозуміти, чи має сенс включити фігури у дизайн вашого наступного проекту.

Важливо! CSS Shapes підтримують браузери Firefox, Chrome, Safari і Opera, а також мобільні браузери, такі як iOS Safari та Chrome для Android. CSS Shapes не підтримує IE та наразі перебуває на розгляді в Microsoft Edge.

Перший погляд на CSS Shapes

Поточна реалізація CSS Shapes — це CSS Shapes Module Level 1, яка в основному обертається навколо властивості shape-outside. Ця властивість визначає фігури, навколо яких може обтікати текст.

У цій статті ми продемонструємо, як використовувати базові фігури та задати їх значення, а також як встановити фігуру за допомогою напівпрозорої картинки або градієнта.

Базові фігури

Ми можемо визначити всі види базових фігур у CSS, застосовуючи наступні значення функцій до властивості shape-outside:

• circle()
• ellipse()
• inset()
• polygon()

Для додавання властивості shape-outside до елементу, він повинен бути обтіканим, а також має мати встановлену висоту та ширину. Подивимось на кожну з чотирьох основних фігур та продемонструємо, як їх можна використовувати.

circle()

Почнемо з функції circle(). Зображення веб-сторінки виглядатиме так.

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

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

На жаль, встановлення фону для circle дає нам прямокутник, те саме, що ми намагалися уникнути.

Ми можемо чітко бачити обтікаючий текст, але не саму фігуру елемента. Якщо бажаємо її відобразити, то потрібно використовувати властивість clip-path.

Функція circle() приймає необов'язковий параметр радіуса. У нашому випадку радіус за замовчуванням (r) становить 50% або 100px. Використання circle(50%) або circle(100px) дозволить отримати той самий результат, що ми вже зробили.

Можна помітити, що текст розташовується одразу біля фігури. Ми можемо використовувати властивість shape-margin, щоб додати поля до фігури; значення може бути задане в px, em,% або в будь-якій іншій стандартній одиниці вимірювання CSS.

В додаток до радіусу функція приймає позиціонування через at. Положення за замовчуванням — центр кола, тому circle() буде явно записано як circle(50% at 50% 50%) або circle(100px at 100px 100px); значеннями є горизонтальне та вертикальне положення, відповідно.

Щоб зрозуміти, як працює позиціонування, можемо задати значення горизонтального положення рівним 0 та отримати ідеальне півколо.

Ця координатна система позиціонування відома як зв'язаний блок.

Пізніше ми дізнаємося, як використовувати зображення замість фігури або градієнта. А зараз перейдемо до наступної фігури.

ellipse()

Схожою на circle() є функція ellipse(), яка створює еліпс. Для демонстрації додамо елемент з класом ellipse.

На цей раз ми встановили різну висоту та ширину, щоб створити вертикально витягнутий овал.

Різниця між ellipse() та circle() полягає в тому, що еліпс має два радіуси— rx та ry або радіус по осі X та радіус по осі Y. Тому вищезазначений приклад можна записати так:

Параметри позиціонування однакові для кол та еліпсів. Радіуси, крім того, що вони є одиницею вимірювання, також включають farthest-side та closest-side.

Найменшою кількістю наборів точок, які ми можемо застосувати до polygon(), є три, що створює трикутник.

В цій фігурі перша точка — 0 0, найлівіша верхня точка