css властивість clip

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

Все, що не поміщається в цю область, буде обрізано та стане невидимим. Властивість clip працює тільки з абсолютно позиційованими елементами (зі значеннями position і fixed) та не працює якщо для елемента задана властивість overflow: visible.

Як значення використовується відстань від краю елемента до області вирізки, яке задається в одиницях CSS - пікселі (px), em та ін. Якщо край області потрібно залишити без змін, слід встановити auto.

правити

Нотатка

Властивість clip вважається застарілою. Замість неї, рекомендується використовувати clip-path. Деякі браузери до сих пір підтримують її, але Ви маєте бути обережними: ця властивість може бути видалена остаточно будь коли!

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

clip: auto|shape|initial|inherit;

Властивість clip може отримувати 4 значень:

auto

Все залишиться без змін

автор: NagarD

правити

shape

Єдине допустиме значення: rect (top, right, bottom, left)

автор: NagarD

правити

initial

Встановлює властивість у значення без задання

автор: NagarD

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	7	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div class="area">
    <img src="/img/logo.svg" alt="повне зображення">
    <img class="cut" src="/img/logo.svg" alt="обрізане clip-ом">
</div>

.area {
    position: relative;
    height: 140px;
}

img {
    width: 120px;
}

.cut {
    position: absolute;
    left: 160px;
    top: 0;
    clip: rect(0px, 60px, 200px, 0px);
}