Кадрування це коли ми відрізаємо частину чогось. У нашому випадку це операція, яка дозволяє частково або повністю приховати елемент на сторінці. У цій статті ми будемо користуватися двома концепціями clipping path (шлях обрізки) і clipping region (регіон обрізки).
Шлях обрізки це той маршрут, по якому буде обрізаний елемент. З його допомогою ми задаємо обрізана область. Форма області може бути як простий, так і складною. Регіон обрізки це все, що знаходиться всередині шляху обрізки.
Все, що знаходиться за межами регіону обрізання, ховається браузером. Ховається не тільки фон, але і рамки, текстові тіні і т.д. У більшості браузерів за межами регіону обрізання не працюватимуть події hover або click на елементі.
Навіть якщо на вигляд наш елемент має форму, відмінну від прямокутника, контент навколо нього все одно сприймає його як прямокутник. Щоб виправити це, необхідно використовувати властивість shape-outside.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Не можна плутати ця властивість із застарілим clip, у якого було безліч обмежень, а також підтримувалося тільки прямокутне кадрування.
Синтаксис і застосування
clip-source - URL на внутрішній або зовнішній SVG елемент.
basic-shape приймає стандартну функцію форми, прописану в специфікації CSS Shapes.
geometry-box - необов'язковий параметр. У парі з функцією basic-shape даний параметр задає еталонний блок для обрізання функцією basic-shape. Якщо заданий тільки geometry-box, то для обрізки використовується його форма, в тому числі і всі викривлення (за допомогою властивості border-radius). Нижче ми розберемо цю функцію подбробнее.
Погляньте на CSS код з функцією базової форми:
Всі зображення будуть обрізані в формі ромба. Але чому саме ромб, а не трапеція або паралелограм? Все залежить від зазначених значень вершин. Малюнком нижче можна користуватися для створення власних фігур для кадрування:
Перша координата кожної точки визначає положення на осі Х. Друге значення відповідає за вісь У. Всі точки йдуть за годинниковою стрілкою. Подивіться на саму праву точку нашого ромба. Вона розташована посередині осі У, тобто її координата 50%. Також вона розташована в максимальному значенні по осі Х, тобто координата 100%. Значення інших точок можна розрахувати схожим чином.
Кадрування елементів за допомогою значень geometry-box
При обрізанні HTML елемента geometry-box може приймати одне із значень: margin-box, border-box, padding-box або content-box. Значення geometry-box використовується наступним чином:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Застосування властивості clip-path
У даного властивості багато цікавих способів застосування. По-перше, з його допомогою можна покращувати текстовий контент. Погляньте на зображення нижче. Фон заголовка і другого параграфа створені за допомогою цієї властивості:
Перший фон можна так само просто створити за допомогою градієнта або будь-який інший техніки. А ось другий фон буде створити набагато складніше без властивості clip-path. Зверніть увагу, що нижня лінія фону параграфа не зовсім пряма, вона під легким нахилом. Зробити такий фон за допомогою властивості clip-path можна в один рядок:
Приклад роботи clip-path:
З властивістю clip-path можна витворяти що завгодно - можна створювати кнопки химерних форм або додати красивий hover ефект до меню. Все залежить тільки від вашої уяви!
додаємо анімацію
Дана властивість можна анімувати. Необхідно тільки дотримуватися, щоб кількість вершин кінцевої і першої фігури збігалися. Дане обмеження встановлено не просто так, інакше браузер просто не зможе зрозуміти, в якому місці вставити ще одну вершину (або звідки її видалити). Нижче представлений код анімації трапеції:
В кінці анімації трапеція перетворюється в трикутник. Як я сказав раніше, не можна міняти кількість вершин. В іншому випадку перехід до нової форми буде різким. Тому перші дві вершини останнього полігону я задав в одному і тому ж місці. Наш чотирикутник прекрасно трансформується в трикутник.
Підтримка в браузерах
Властивість не підтримується в 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 - з їх допомогою ви з легкістю будете створювати складні полігональні форми.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
