Ви напевно чули про CSS властивість clip. Воно має деякі оригінальні параметри і синтаксис і цей пост коротко покаже використання цієї якості.

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

Синтаксис

Синтаксис властивості clip виглядає так:

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

Найголовнішу річ, яку слід знати про clip, це те, що воно може бути застосоване лише до абсолютно позиціонованих елементів (тобто встановлені position: absolute; або position: fixed;).

Наступна частина синтаксису, це сама властивість clip. Значенням може бути як визначення форми чи “auto”. Значення “auto” є значенням за промовчанням і не впливає елемент до якого застосовується. Так що використання clip: auto; рівносильно відсутності цієї властивості взагалі.

Форма обрізання (на даний момент лише прямокутники дозволені) задається за допомогою функції “rect()”, передаючи параметри визначають цю форму. Значення параметрів можуть бути як позитивними, і негативними.

Параметри функції rect()

Спочатку значення передані в rect() можуть трошки збивати з пантелику, але після ближчого ознайомлення, з ними стане дуже легко працювати. В основному ці значення представляють верх, право, низ і ліво, абсолютно аналогічно як це задається в інших властивостях CSS, як, наприклад, для властивостей margin і padding. Значення визначають зсув від верхнього та лівого краю елемента.

Іншими словами, у прикладі вище, перше значення ставить уявну горизонтальну лінію на відстані 110px від верхнього краю елемента (перше значення) та іншу горизонтальну лінію на відстані 170px від верху (третє значення). Друге значення ставить уявну вертикальну лінію на відстані 160px від лівого краю елемента, і останнє значення ставить ще одну уявну вертикальну лінію на відстані 60px від лівого краю.

Наочно це демонструється на картинці:

CSS Clip

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

Можна вважати, що властивість clip працює як visibility: hidden; але застосовується тільки до певної частини елемента.

Слід зазначити, що IE6 і IE7 підтримують властивість clip, але значення rect() слід розділяти не комами і пробілами. Схоже інші браузери також підтримують clip із пробілами замість ком, так що якщо ви хочете повну підтримку браузерами, включаючи Internet Explorer, слід використовувати стиль запису з пробілами замість ком.

Весела анімована галерея

Властивість clip включено до списку анімованих властивостей W3C. Приклад нижче демонструє роботу цієї властивості з використанням анімації.

Дивитись приклад.

Цей пост є перекладом оригінальної статті.





2 відповіді до “Властивість clip у CSS”

  1. MegaWebDeveloper :

    Дякую за детальне роз’яснення. Здається ця властивість має не дуже часте практичне використання, але як для веб розробника початківця було цікаво почитати…

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.