clip

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

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

Кратко

Секция статьи "Кратко"

С помощью свойства clip можно обрезать элемент, оставив видимой только его часть.

Пример

Секция статьи "Пример"

Возьмём изображение симпатичного домика и при помощи свойства clip обрежем часть картинки:

        
          
          img {  clip: rect(auto 220px 150px auto);}
          img {
  clip: rect(auto 220px 150px 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.