Від автора: веб-сайти мають переважно прямокутну форму, а ось друковані ЗМІ не обмежені лише прямокутником. Різниця криється в безлічі причин, одна з яких це відсутність відповідних інструментів. У цьому уроці ви дізнаєтеся про властивість clip-path, з допомогою якого можна кадрувати зображення. Видима область задається з допомогою спеціальних значень. Ми почнемо з основних моментів, розглянемо синтаксис і потім перейдемо на більш просунуті концепції.
Основи
Кадрування це коли ми відрізаємо частина чогось. У нашому випадку це операція, яка дозволяє частково або повністю приховати елемент на сторінці. У цій статті ми будемо користуватися двома концепціями clipping path (шлях обрізки) і clipping region (регіон обрізки).
Шлях обрізки це той маршрут, яким буде обрізаний елемент. З його допомогою ми задаємо вырезаемую область. Форма області може бути як простою, так і складною. Регіон обрізки це все, що знаходиться всередині шляху обрізки.
Все, що знаходиться за межами регіону обрізання, ховається браузером. Ховається не тільки фон, але і рамки, текстові тіні і т. д. В більшості браузерів за межами регіону обрізання не будуть працювати події hover або click на елементі.
Навіть якщо на вигляд наш елемент має форму, відмінну від прямокутника, контент навколо нього все одно сприймає його як прямокутник. Щоб виправити це, необхідно використовувати властивість shape-outside.
Не можна плутати цей параметр з застарілим clip, у якого було безліч обмежень, а також підтримувався тільки прямокутне кадрування.
Синтаксис і застосування
Синтаксис властивості:
clip-path: | [ || ] | none
Значення вище:
clip-source — URL на внутрішній або зовнішній SVG елемент.
basic-shape приймає стандартну функцію форми, прописану в специфікації CSS Shapes.
geometry-box – необов’язковий параметр. В парі з функцією basic-shape даний параметр задає еталонний блок для обрізання функцією basic-shape. Якщо задано тільки geometry-box, то для обрізки використовується його форма, в тому числі і всі викривлення(з допомогою властивості border-radius). Нижче ми розберемо цю функцію подбробнее.
Погляньте на CSS код з функцією базової форми:
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
Всі зображення будуть обрізані у формі ромба. Але чому саме ромб, а не трапеція або паралелограм? Все залежить від значень вершин. Малюнком нижче можна користуватися для створення власних фігур для кадрування:
Перша координата кожної точки визначає положення на осі Х. Друге значення відповідає за вісь У. Всі точки йдуть за годинниковою стрілкою. Подивіться на саму праву точку нашого ромба. Вона розташована посередині осі У, т. е. її координата 50%. Також вона розташована в максимальному значенні по осі Х, тобто координата 100%. Значення інших точок можна розрахувати схожим чином.
Кадрування елементів за допомогою значень geometry-box
При обрізанні HTML елемента geometry-box може приймати одне із значень: margin-box, border-box, padding-box або content-box. Значення geometry-box використовується наступним чином:
.clip-me {
clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
margin: 10%;
}
У нашому прикладі margin-box буде використовуватися як посилання на точне положення вершин обрізання. Точка 10%, 10% — верхній лівий кут нашого margin-box, тобто clip-path буде відштовхуватися від цієї точки. Значення для SVG: fill-box, stroke-box і view-box. Якщо view-box не задано, то значення view-box буде використовувати найближчий розмір SVG області.
Застосування властивості clip-path
У даного властивості багато цікавих способів застосування. По-перше, з його допомогою можна покращувати текстовий контент. Погляньте на зображення нижче. Фон заголовка і другого параграфа створені з допомогою цієї властивості:
Перший фон можна так само просто створити з допомогою градієнта або будь-якої іншої техніки. А ось другий фон буде створити набагато складніше без властивості clip-path. Зверніть увагу, що нижня лінія фону параграфа не зовсім пряма, вона під легким нахилом. Зробити такий фон за допомогою властивості clip-path можна в один рядок:
.p-msg {
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%);
}
Фон має сім вершин, що відображено в коді вище. Ви можете запитати, а як же я отримав ці координати? Залишу питання без відповіді, подумайте самі – так ви набагато краще зрозумієте принцип роботи даного властивості. Поиграйтесь з демо нижче, щоб зрозуміти:
З допомогою цієї властивості та додаткового CSS коду можна додавати до зображень різні форми і збирати їх в композиції. Тепер у вашій галереї можуть бути не тільки прямокутні превью зображень, а аватарки користувачів можуть приймати взагалі будь-яку форму. У цьому уроці ми створимо композицію із зображень у вигляді ромба. Так як у всіх зображень одна і та ж форма ромба, то і значення для властивості clip-path у них будуть збігатися. Нижче представлений CSS код самого правого зображення:
.right {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: relative;
top: -352px;
left: 256px;
}
Приклад роботи clip-path:
З властивістю clip-path можна витворяти що завгодно – можна створювати кнопки химерних форм або додати красивий hover ефект до меню. Все залежить тільки від вашої уяви!
Додаємо анімацію
Цю властивість можна анімувати. Необхідно лише дотримуватися, щоб кількість вершин кінцевої і першої фігури збігалися. Це обмеження встановлено не просто так, інакше браузер просто не зможе зрозуміти, в якому місці вставити ще одну вершину (або звідки її видалити). Нижче представлений код анімації трапеції:
@keyframes polygons {
25% {
clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);
}
50% {
clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);
}
70% {
clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);
}
}
Наприкінці анімації трапеція перетворюється в трикутник. Як я сказав раніше, не можна змінювати кількість вершин. У противному разі перехід до нової форми буде різким. Тому перші дві вершини останнього полігону я поставив в одному і тому ж місці. Наш чотирикутник чудово трансформується в трикутник.
Підтримка в браузерах
Властивість не підтримується IE і Edge. Firefox підтримує clip-path частково (підтримується тільки синтаксис url()). Однак з 47 версії і вище Firefox повністю підтримує цю властивість включеним прапором layout.css.clip-path-shapes.enabled.
У Chrome, Safari і Opera потрібний префікс -webkit-. На жаль навіть у цих браузерах не підтримуються фігури з зовнішніх SVG файлів. Більш детально про підтримку можна дізнатися на сайті Can I Use.
Висновок
У даному уроці ми познайомилися з властивістю clip-path. Навчитися працювати з даними властивістю не вимагає багато часу. Однак якщо ви хочете створити щось по-справжньому креативне, доведеться трохи попрактикуватися. До того ж підтримка у clip-path досить непогана, ви вже можете створювати потужні ефекти.
Дам вам посилання на два інструменту — clippy від Bennett Feely і clip path generator від CSS Plant – з їх допомогою ви з легкістю будете створювати складні полігональні форми.
А ви вже створювали щось незвичайне з допомогою властивості clip-path? Залишайте посилання в коментарях.
