Відсікання за допомогою властивості clip-path схоже на вирізання фігури (наприклад, кола або п'ятикутника) з прямокутного аркуша паперу. Властивість відноситься до специфікації «». Специфікація заявляє: «Маскування CSS пропонує два засоби для часткового або повного приховування частин візуальних елементів: маскування і відсікання».
Перша частина, тобто маскування, пов'язана з використанням графічного елемента, такого як зображення PNG, CSS або елемент SVG, як маска для приховування розділів іншого елемента.
Друга частина, тобто clip-path, включає замкнутий векторний контур, який може бути базовою фігурою, визначеною CSS або SVG з використанням тега clipPath. Область всередині цього контуру відображається, а все, що знаходиться за її межами або зовні, буде обрізано.
Маскування виходить за рамки цього матеріалу, але CSS-Tricks та HTML5 Rocks містить більше інформації.
Ніж наведена проста візуалізація того, як працює clip-path.
See the Pen Visualizing clip-path by webref (@webref) on CodePen.
Демонстрації в цій статті, у тому числі й вище, будуть працювати у Firefox та в браузерах WebKit та Blink, включаючи Chrome, Safari та Opera.
clip-path — це не clip
Існує стара властивість clip із CSS 2.1 , яке досить обмежене, хоча б тому, що воно підтримує лише прямокутні фігури. Властивість застаріло на користь clip-path.
Статті про відсічення, що використовують застарілий синтаксис, містять код, який виглядає таким чином:
.element { clip: rect(30px, 30px, 20px, 20px); } Підтримка clip-path
У серпні 2014 року «CSS Masking Module» було опубліковано як «Можлива рекомендація», що є кроком уперед порівняно з раннім етапом « Робочий проект". Перш ніж ми подивимося на підтримку браузерами, важливо розглянути кілька способів, як clip-path може застосовуватися до елемента, оскільки підтримка браузером залежить від кожного методу.
Існує два способи використання clip-path.
1. на CSS
Основні фігури з «CSS Shapes Module» забезпечують зручний спосіб використання clip-path. Доступні різні фігури: polygon, circle, ellipse та inset; inset призначений для прямокутників.
2. на SVG
В якості альтернативи можна створити фігуру за допомогою SVG, а потім обрізати елемент за цією фігурою за допомогою синтаксису URL. Є два способи зробити це:
- через вказівник на вбудований SVG (тобто розмітка SVG існує на самій сторінці);
- з посиланням на зовнішній документ SVG.
В обох випадках в SVG використовується елемент clipPath для обгортання елемента, який визначає відсічний контур, будь то коло, багатокутник або інший елемент. Порівняйте демонстраційну версію нижче у Firefox та браузері WebKit або Blink, такому як Chrome, щоб визначити відмінності. Квадратні зображення мають на увазі відсутність підтримки браузера.
Третє зображення не відображається в Safari. Незважаючи на велике налагодження, мені не вдалося вирішити цю проблему. Я була б вдячна за примітку в розділі коментарів, якщо ви зіткнетеся з рішенням.
See the Pen Clip-path: Browser support by webref (@webref) on CodePen.
Оскільки ви, ймовірно, зібралися дивитися демонстрацію вище в різних браузерах, підтримка відсічних шляхів химерна і в даний час залежить від того, як ви хочете обрізати елемент.
- на CSS: Firefox 54+, Chrome 24+, Safari 7+, Opera 15+, iOS 7.1+, Android 4.4+, Opera Mobile 24+
Зверніть увагу, що для всіх підтримуваних браузерів зараз потрібно префікс-webkit. (крім Firefox — прим. перекладача).
- на SVG: усі перераховані вище браузери та Firefox 3.5+.
Властивість clip-path ще не підтримується в Internet Explorer, але розробляється як частина "Masking Module".
Сучасні браузери WebKit і Blink підтримують відсічні контури на SVG, тільки якщо вони оголошені вбудованими (тобто всередині документа). Посилання на зовнішні SVG підтримуються лише у Firefox, про що свідчить демонстрація вище. Проект Chromium відслідковує цю помилку.
Давайте розглянемо переваги CSS та SVG під час роботи з clip-path.
Переваги CSS
- Ясний синтаксис легкий для розуміння через відносну простоту базових фігур.
- Адаптивність легко виходить через відносні одиниці, такі як відсотки.
Переваги SVG
- Підтримка браузерами краще, додається Firefox.
- Ви можете зробити обрізку складними фігурами, декількома фігурами та текстом.
Крім того CSS пропонує властивість background-clip, яке дає нам деякі варіанти (включаючи нестандартний спосіб обрізки тексту), при цьому ні background-clip, ні clip-path не відповідають тому, що може робити відсікання на SVG у сучасних браузерах. Однак знайомство з clip-path через CSS менш застрашливо (особливо якщо ви не знайомі з маніпуляцією SVG) і підготує вас до тонкощів відсічних контурів за допомогою SVG, а також до модуля CSS Shapes Module, де вміст вирівнюється за формою елемента.
Якщо вам не терпиться вникнути в матрицю відсікання на SVG, огляд Сари Суейдан стане гарною відправною точкою.
Давайте розглянемо плюси та мінуси використання clip-path для прогресивного покращення нашого дизайну.
Плюси
- Браузери, які не підтримують властивість clip-path, будуть ігнорувати його. Якщо ви використовуєте властивість обережно, користувачі з непідтримуваними браузерами нічого не запідозрять! Після створення відсічного контуру специфікація заявляє, що події вказівника не повинні вирушати за межі області відсікання (що ідеально). Таким чином, події клацання обмежені фігурою та її зовнішнім кордоном.
- Ви можете використовувати відсотки або будь-яку одиницю довжини, наприклад пікселі або em, для визначення координат базових фігур за допомогою CSS. Гнучкі одиниці, такі як відсотки, можуть використовуватися для створення чуйних фігур, які ідеально підходять для адаптивних макетів. href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="nofollow">за межами області відсікання будуть обрізані. Ви не можете додати кордон і чекати на його дотримання. Нижче ми розглянемо деякі альтернативи.
- Специфікація ще не досягла стадії «Рекомендація», тому завжди є шанс, що синтаксис зміниться.
- Повідомляється про кілька помилок з clip-path та тривимірними трансформаціями, переходами та прозорістю, які описані нижче. Пам'ятайте про це та уникайте комбінування властивостей, які породжують такі помилки. Див. також