Фігури на CSS: вступний курс

28

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

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

Наприклад, зверніть увагу як текст обтікає круглі картинки в наступному дизайні. Без Фігур, текст мав би прямокутну форму – викидаючи витончений прийом, який піднімає дизайн на наступний рівень.

Фігури на CSS: вступний курс

Зверніть увагу як текст приймає округлу форму по краях тарілки в цьому прикладі. Використовуючи Фігури СЅЅ, ми можемо створити схожий дизайн і веб-сторінки.

Давайте детально розберемо як працюють Фігури і як ви можете почати їх використовувати.

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

CSS Фігури поки що підтримуються тільки в Webkit Nightly і Chrome Canary, але їх Модуль 1 Рівня досяг статусу кандидатської рекомендації, таким чином, властивості і синтаксис, визначені в специфікації є досить стабільними. Пройде небагато часу до того, як і інші браузери почнуть їх підтримувати. Цей рівень концентрується на тих властивостях Фігур, які змінюють потік контенту навколо фігури. Зокрема, він концентрується на властивості shape-outside і пов’язаних з ним.

У поєднанні з іншими останніми можливостями, такими як Обрізка і Накладення маски, CSS фільтри і Колажування і Злиття, CSS Фігури дозволять нам створювати більш складний вишуканий дизайн без необхідності вдаватися до графічним редакторам, таких як Photoshop, InDesign.

Майбутні рівні CSS Фігур також будуть приділяти увагу оформлення контенту всередині фігур. Наприклад, на сьогоднішній день, досить просто створити ромбічну фігуру на CSS: всього лише перевернути елемент на 45 градусів, а потім перевернути контент усередині нього в зворотному напрямку, щоб він розміщувався на сторінці горизонтально. Але контент всередині ромба не буде приймати відповідну форму, і завжди буде залишатися прямокутним. До того часу, коли властивість shape-inside буде реалізовано, ми зможемо зробити контент теж ромбічним, створюючи розмітку, схожу на картинку нижче.

Фігури на CSS: вступний курс

Незабаром CSS Фігури також дозволять оформляти текст всередині, як ці ромби, щоб замість обрізання або використання overflow, тексту сам розташовувався щодо країв контейнера.

Щоб використовувати CSS Фігури в Chrome Canary, вам необхідно увімкнути прапорець, робить доступними експериментальні можливості.

Створення CSS Фігури

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

Фігури на CSS: вступний курс

Фігури можуть бути створені з допомогою однієї з наступних функцій:

circle()

ellipse()

inset()

polygon()

Кожна фігура визначається набором точок. Деякі функції приймають точки в якості параметрів; інші – приймають параметри зміщення, але всі вони в кінцевому підсумку отрисовывают фігури на елементі як набір точок. Ми розберемо параметри для кожної з цих функцій на прикладах.

Фігура також може бути визначена зображення з допомогою вилучення альфа каналу. Коли зображення передається властивості shape, браузер витягує фігуру з зображення на підставі значення shape-image-threshold. Фігура визначається пікселями, альфа значення яких вище заданого порогу. Зображення повинно мати CORS сумісність. Якщо надане з якоїсь причини недоступне (наприклад, воно не існує), тоді жодна фігура застосовано не буде.

Такі фігури беруть вищеописані функції в якості значень:

shape-outside: змушує контент огинати фігуру (зовні)

shape-inside: контент приймає форму фігури зсередини

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

Використовуючи властивості фігури або функції, оголошуючи елемент фігури, можна обійтися всього одним рядком CSS коду:

.element { shape-outside: circle(); /* контент буде обтікати коло, заданий елемента */ }

Або:

.element { shape-outside: url(path/to/image-with-shape.png); }

Але… Якщо ви застосовуєте цю сходинку CSS коду елемента, фігура не буде застосована до нього, якщо не будуть дотримані наступні умови:

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

Елемента повинні бути задані розміри. Висота і ширина, задані елементу будуть використані для встановлення системи координат.

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

.element { float: left; height: 10em; width: 15em; shape-outside: circle(); }

Однак, завдання певних розмірів елемента не впливає на його чуйність (ми поговоримо про це пізніше). Так як кожна фігура визначається як набір точок, розташованих з використанням пари координат, зміна координат точки прямо вплине на створену фігуру. Наприклад, наступний малюнок показує шестикутник, який може бути створений за допомогою функції polygon(). Фігура складається з шести точок. Зміна горизонтальної координати помаранчевої точки змінить остаточну фігуру, а також вплине на розміщення контенту всередині/зовні будь-якого елемента, до якого застосовується фігура.

Фігури на CSS: вступний курс

Якщо елемент плаває і вирівняно по правому краю, а також до нього застосована фігура, контент зліва від нього змінить своє розташування, коли буде змінена одна з координат помаранчевої точки всередині функції polygon().

Довідковий блок Фігури

CSS Фігури визначаються і створюються всередині довідкового блоку (reference box), де і відбувається побудова фігури. В добавок до висоті і ширині елемента, складові частини блочної моделі елемента — margin box, content box, padding box і border box – також є довідниками для визначення фігури елемента.

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

shape-outside: circle(250px at 50% 50%) padding-box;

Ключове слово padding-box в цьому правилі визначає застосування фігури і обмеження у вигляді padding box (площа внутрішнього простору). Функція circle() визначає коло, його розміри і розміщення щодо елементів.

Визначення Фігур за допомогою функцій

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

Фігури на CSS: вступний курс

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

Ми будемо використовувати функцію circle() для того, щоб застосувати круглу форму зображення профілю, використовуючи наступну розмітку:

Фігури на CSS: вступний курс

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?

Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.

Ви можете запитати: «Чому ми не можемо застосувати border-radius для округлення картинки?» Відповідь: властивість border-radius ніяк не впливає на розташування контенту всередині і зовні елемента, до якого воно застосовано. Воно впливає тільки на межі елемента або фон. Фон обрізається по округленим кутах, на цьому все. Контент всередині елемента залишиться прямокутним, і контент зовні елемента буде вести себе так, ніби елемент залишається прямокутним.

Ми збираємося використовувати властивість border-radius для того, щоб зробити зображення круглим – ось те, що ми робимо для того, щоб округлити малюнки або інші елементи на сторінці:

img { float: left; width: 150px; height: 150px; border-radius: 50%; margin-right: 15px; }

Фігури на CSS: вступний курс

Без CSS Фігур текст бачить картинку як квадратну і обтікає квадратну фігуру, а не круглу.

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

img { float: left; width: 150px; height: 150px; border-radius: 50%; shape-outside: circle(); shape-margin: 15px; }

За допомогою цього коду, текст зможе «побачити» круглу фігуру, застосовану до зображення, і буде обтікати його, як показано на першому скрін-шоти. (Ви можете подивитися на результат тут.) В браузерах, що не підтримують фігури, це буде виглядати так, як показано на другому зображенні.

Ви можете використовувати функцію circle() в чистому вигляді або передавати їй параметри. Ось її офіційний синтаксис:

circle() = circle( []? [at ]? )

Питальні знаки показують, що ці параметри опціональні і можуть бути пропущені. Ті параметри, які ви пропускаєте, будуть приймати значення за замовчуванням. Коли ви використовуєте circle() як є, замість прямої вказівки положення, за замовчуванням, центр кола буде знаходитися в центрі елемента, до якого ви його застосовуєте.

Ви можете задати радіус кола, використовуючи будь-які одиниці довжини (px, em, pt, і т. д.) Також ви можете задати радіус за допомогою параметрів, використовуючи closest-side або furthest-side, але closest-side – значення по умовчанню, що означає, що браузер буде приймати за радіус відстань від центру елемента до найближчої сторони, farthest-side використовує відстань від центру до далекої сторони.

shape-outside: circle(farthest-side at 25% 25%); /* визначає коло, радіус дорівнює половині найбільш довгої сторони, розташований у точці з координатами 25% 25% в системі координат елемента */ shape-inside: circle(250px at 500px 300px); /* визначає коло, чий центр розташований в 500px горизонтально і 300px вертикально,з радіусом в 250px */

Фігури на CSS: вступний курс

Функція ellipse() працює також як і circle(), з тим же набором значень, за винятком того, що замість параметра радіуса, вона приймає два: один радіус осі-х, інший – по осі у.

ellipse() = ellipse( [{2}]? [at ]? )

Функція inset() не має прямого відношення до кола або еліпса, вона використовується для створення прямокутних форм всередині елемента. Так як елементи і так є прямокутними, нам вона не потрібна для створення прямокутників. Замість цього, inset() може допомогти нам створювати прямокутник з округленими кутами, так щоб контент обтекал округлені кути.

Фігури на CSS: вступний курс

Функція inset() приймає від одного до чотирьох параметра зсуву, які визначають зміщення відносно країв довідкового блоку, що визначає місцезнаходження прямоугольгика всередині елемента. Округлені кути позначаються точно таким же способом, як і border-radius, використовуючи одне з чотирьох значень, в поєднанні з ключовим словом round.

inset() = inset( offset{1,4} [round ]? )

Наступний код створить прямокутник з округленими кутами на плаваючому елементі.

.element { float: left; width: 250px; height: 150px; shape-outside: inset(0px round 100px) border-box; }

Подивіться на живий приклад тут.

Остання функція Фігур – це polygon(), яка визначає більш складні неоднозначні постаті, використовуючи будь-яку кількість точок. Функція приймає набір пар координат, де кожна пара визначає положення точки.

У наступному прикладі, плаваюче зображення розміщується з правого краю, займаючи всю висоту екрану і використовуючи одиниці вікна перегляду. Ми хочемо, щоб текст зліва обтекал пісочний годинник всередині зображення, і ми використовуємо функцію polygon(), щоб визначити нестандартну фігуру для зображення.

Фігури на CSS: вступний курс

CSS код для зображення вище виглядає наступним чином:

img.right { float: right; height: 100vh; width: calc(100vh + 100vh/4); shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); }

Ви можете задати координати точок, що визначають фігуру в одиницях довжини або у відсотках, як у мене. Цей код дасть необхідний результат, але як ви бачите, функція фігури не впливає на решту частини зображення за межами заданої фігури. Справа в тому, що застосування функції фігури до елемента – будь то зображення або контейнер або щось інше – не вплине ні на що, крім області обтікання контенту. Фон, межі і все інше залишиться незмінним.

Щоб візуально представити створений багатокутник, нам потрібно «обрізати» частини зображення за межами фігури. В цьому нам допоможе властивість clip-path специфікації CSS Masking Module.

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

img.right { float: right; height: 100vh; width: calc(100vh + 100vh/4); shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); /* обрізка зображення по контуру фігури */ clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); }

Результат виглядає так:

Фігури на CSS: вступний курс

Властивість clip-path поки підтримується разом з префіксами, тобто воно буде працювати в Хромі з додаванням префікса –webkit-. Ви можете подивитися на демо тут.

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

Функція polygon() приймає опціональне ключове слово для заповнення, яке може бути або nonzero або evenodd. Воно визначає те, як будуть вести себе пересічні області всередині многокутника. Ознайомтеся із властивістю SVG fill-rule для отримання подробиць.

Визначення фігури за допомогою зображення

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

Фігура визначається пікселями, чиє альфа значення вище певного порогу. Значення порогу за замовчуванням становить о. о (цілком прозорий), або ви можете задати його прямо з допомогою властивості shape-image-threshold. Таким чином, будь-непрозорий піксель може бути використаний як частина фігури, яка визначається зображенням.

Майбутній рівень CSS Фігур може дозволяти переходити на використання даних яскравості зображення замість альфа каналу. Якщо це станеться, shape-image-threshold буде розширено, щоб включати поріг або для яскравості або альфа-каналу, в залежності від стану перемикача.

Ми використовуємо наступне зображення, щоб визначити фігуру елемента і змусити текст обтікає його:

Фігури на CSS: вступний курс

Використовуючи властивість shape-outside разом зі значенням url(), що вказує на зображення, ми можемо змусити текст обтікає лист за формою.

.leaf-shaped-element { float: left; width: 400px; height: 400px; shape-outside: url(leaf.png); shape-margin: 15px; shape-image-threshold: 0.5; background: #009966 url(path/to/background-image.jpg); mask-image: url(leaf.png); }

Звичайно ж, якщо ви застосували фон до елементу, фон буде необхідно обрізати за межами заданої фігури. Властивість mask-image (з відповідними префіксами) з Модуля Масок, може допомогти в цьому, так як властивість clip-path не приймає значення альфа-каналу в якості значення. Результат виглядає ось так:

Фігури на CSS: вступний курс

Якщо ви створюєте складні фігури, вам можливо буде зручно ставити фігуру за допомогою картинки. Це дозволить використовувати альфа-канал зображення в Photoshop, замість того ,щоб задавати точки вручну.

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

CSS Фігури в дизайні чуйну

Можуть CSS Фігури підійти для чуйного дизайну? Поточна специфікація для shape-outside включає цей момент, тому що вона дозволяє задавати розміри елементу, або у відсотках, або в одиницях довжини, і точки визначають фігуру (параметри функції фігури) також можуть бути задані у відсотках. Це означає, що елемент із заданим shape-outside може бути повністю чуйним, також як і будь-який плаваючий елемент з розмірами, визначеними у відсотках.

Властивість shape-inside поки що не чуйне, але це тому що, воно було зрушено в Модуль 2 Рівня. Багато з його поточних обмежень підуть на наступному рівні.

Інструменти для створення Фігур

Створення складних фігур з використанням функцій може виявитися трудомісткою завданням, особливо якщо ви створюєте фігуру з безліччю точок і координат, використовуючи polygon(). На щастя, команда веб-платформи Адобе працює над виробництвом інтерактивних інструментів, щоб зробити цей процес набагато легше. Bear Travis створив колекцію Інструментів для створення Фігур, яка дозволяє візуально створювати багатокутні фігури. Інструмент генерує функцію фігури. Це може бути корисним, але має свої обмеження, якщо ви ходите створити фігуру на основі певного зображення, тому що інструмент такої можливості не надає.

Більш просунутий і інтерактивний інструмент був розроблений командою веб платформи Adobe. Інструмент, нещодавно був випущений в якості розширення для безкоштовного редактора Brackets. Він дозволяє візуалізувати і редагувати фігури прямо в браузері, і має можливість онлайн превью, яка оновлює значення фігури в таблиці стилів, коли ви міняєте їх на сторінці. Це дає миттєву візуальну зворотний зв’язок вашим змін, дозволяючи побачити як фігури взаємодіють з іншими елементами на сторінці.

Фігури на CSS: вступний курс

Редагування багатокутної фігури прямо в браузері, використовуючи режим превью у Brackets. Запис екрану зроблена Razvan Caliman.

Цей інструмент стане незамінним, оскільки він полегшує созлание, редагування і дебаггинг фігур. Razvan Caliman написав статтю в блозі Bracktes, яка пояснює як викликати редактор Фігур в Brackets і почати його використовувати.

Майбутнє: CSS Виключення

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

Фігури на CSS: вступний курс

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

Новий Рівень Фігур

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

Ви можете використовувати Фігури вже сьогодні як частина стратегії progressive enhancement, знаючи, що у них є прийнятна заміна не підтримують браузерах. Я нещодавно почала застосовувати їх на своєму сайті і заміна виглядає цілком прийнятною. Для більш складного дизайну, ви можете використовувати скрипт для перевірки підтримки браузером, і надавати будь-яку заміну, якщо немає підтримки. Ви також можете використовувати тести Modernizr за допомогою цього скрипта, щоб перевірити, чи підтримується властивість shape-outside, або завантажити власну збірку, що включає цей тест.

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