Кратко
СкопированоС помощью свойства clip можно обрезать элемент, оставив видимой только его часть. Это сработает, если свойство position имеет значение absolute или fixed.
Пример
СкопированоВозьмём изображение симпатичного домика и при помощи свойства clip обрежем часть картинки:
img { position: absolute; clip: rect(40px, 190px, 180px, auto);}
img {
position: absolute;
clip: rect(40px, 190px, 180px, auto);
}
Как понять
СкопированоПредставьте, что у вас есть фотография, и вам нужно обрезать ножницами лишние края. Все как в жизни, только сначала нужно наметить линии отреза. Значения нашего свойства — эти линии и есть. По факту свойство clip ничего не обрезает, конечно, но выглядит это очень похоже.
По умолчанию все элементы видны полностью, так как свойство clip установлено в значение auto.
Если нужно изменить видимую область элемента, то достаточно задать clip нужное значение. Свойство работает только для элементов с абсолютным или фиксированным позиционированием.
При кадрировании размер элемента не меняется, остаётся таким же, как до применения свойства clip, меняется только видимая область.
Как пишется
СкопированоНа данный момент единственная доступная форма области — прямоугольник. Она задаётся с помощью функции rect, где top и bottom указывают смещение от верхнего края элемента, а right и left от левого.
В качестве значений можно использовать ключевое слово auto — края элемента совпадают с краями видимой области, или функцию rect.
В функции rect допускается использование всех стандартных единиц измерения и требуется указание всех четырёх значений.
Эта демка поможет лучше понять, как работает свойство:
Подсказки
Скопировано💡 Свойство не наследуется.
💡 Значение по умолчанию — auto.
💡 Можно анимировать, читайте подробнее про CSS-анимации.
💡 Работает только для элементов с позиционированием absolute или fixed.
На практике
Скопированосоветует
Скопировано🛠 Иногда нам нужно скрыть элемент на странице, не убирая его из разметки, для этого отлично подойдёт свойство clip. Устанавливаем абсолютное позиционирование и определяем видимую область с нулевыми параметрами границ, вот так:
.element { position: absolute; clip: rect(0, 0, 0, 0);}
.element {
position: absolute;
clip: rect(0, 0, 0, 0);
}
Но помните, что скринридеры продолжают видеть такие элементы, для них ничего не изменилось. Если нужно учитывать это, то лучше использовать свойство visibility.
