clip

С помощью свойства 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, right, bottom, left), где top и bottom указывают смещение от верхнего края элемента, а right и left от левого.

В качестве значений можно использовать ключевое слово auto — края элемента совпадают с краями видимой области, или функцию rect().

В функции rect() допускается использование всех стандартных единиц измерения и требуется указание всех четырёх значений.

Эта демка поможет лучше понять, как работает свойство:

💡 Свойство не наследуется.

💡 Значение по умолчанию — auto.

💡 Можно анимировать, читайте подробнее про CSS-анимации.

💡 Работает только для элементов с позиционированием absolute или fixed.

        
          
          .element {  position: absolute;  clip: rect(0, 0, 0, 0);}
          .element {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать