Клавиша / esc

clip

CSS-ножницы для превращения банальных прямоугольников в разные причудливые фигуры.

Время чтения: меньше 5 мин

Кратко

Скопировано

С помощью свойства 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.

На практике

Скопировано

Максим Печёрин советует

Скопировано

🛠 Иногда нам нужно скрыть элемент на странице, не убирая его из разметки, для этого отлично подойдёт свойство clip. Устанавливаем абсолютное позиционирование и определяем видимую область с нулевыми параметрами границ, вот так:

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

        
        
          
        
      

Но помните, что скринридеры продолжают видеть такие элементы, для них ничего не изменилось. Если нужно учитывать это, то лучше использовать свойство visibility.