Свойство clip в CSS

Вы наверняка слышали о CSS свойстве clip. Оно имеет некие уникальные характеристику и синтаксис и этот пост кратко покажет как использовать это свойство.

В конце поста вы найдете ссылку на пример, где используются несколько фотографий для анимации свойства clip, небольшая визуальная демонстрация, того, что это свойство может делать.

Синтаксис

Синтаксис свойства clip выглядит следующим образом:

.example {  
    position: absolute;  
    clip: rect(110px, 160px, 170px, 60px);  
    }  

Самую главную вещь, которую следует знать о clip, это то, что оно может быть применено только к абсолютно позиционированным элементам (т.е., установлены position: absolute; или position: fixed;).

Следующая часть синтаксиса, это само свойство clip. Значением может служить как определение формы или же “auto”. Значение “auto” является значением по умолчанию и никак не влияет на элемент к которому применяется. Так что использование clip: auto; равносильно отсутствию данного свойства вообще.

Форма обрезания (на данный момент, только прямоугольники разрешены) задается с помощью функции “rect()”, передавая параметры определяющие эту форму. Значения параметров могут быть как позитивными, так и негативными.

Параметры функции rect()

По началу значения передаваемые в rect() могут немножко сбивать с толку, но после более близкого ознакомления, с ними станет очень легко работать. В основном эти значения представляют верх, право, низ и лево, абсолютно аналогично как это задается в других свойствах CSS, как например, для свойств margin и padding. Значения определяют смещение от верхнего и левого края элемента.

Другими словами, в примере выше, первое значение ставит мнимую горизонтальную линию на расстоянии 110px от верхнего края элемента (первое значение) и другую горизонтальную линию на расстоянии 170px от верха (третье значение). Второе значение ставит мнимую вертикальную линию на расстоянии 160px от левого края элемента, и последнее значение ставит еще одну мнимую вертикальную линию на расстоянии 60px от левого края.

Более наглядно это демонстрируется на картинке:

Это изображение использует направляющие линии как в Фотошопе, чтобы показать где будут располагаться мнимые лини при таких значениях. Яркая часть изображения это часть изображения, которое будет видно. Остальная часть изображения будет скрыта. Таким образом обрезанная область определена пересекающимся линиями в оставшейся области.

Можно полагать, что свойство clip работает как visibility: hidden;, но применяется только к определенной части элемента.

Следует отметить, что IE6 и IE7 поддерживают свойство clip, но значения в rect() следует разделять не запятыми и пробелами. Похоже остальные браузеры также поддерживают clip с пробелами вместо запятых, так что если вы хотите полную поддержку браузерами, включая Internet Explorer, следует использовать стиль записи с пробелами вместо запятых.

Веселая анимированная галерея

Свойство clip включено в список анимированных свойств W3C. Пример ниже демонстрирует работу этого свойства с использованием анимации.

Смотреть пример.

Данный пост является переводом оригинальной статьи.


Оставьте комментарий