Вероятно, вы уже слышали о параметре CSS «Clip». У него есть некоторые уникальные свойства и синтаксис, и сегодня мы постараемся вам о них рассказать.
В конце статьи вы найдете ссылку на демо-страницу, где несколько фотографий используются для анимации параметра clip для того, чтобы продемонстрировать вам, что выполняет данный параметр.
Синтаксис
Синтаксис параметры clip выглядит следующим образом:
.example { position: absolute; clip: rect(110px, 160px, 170px, 60px); }Первое, что вам нужно знать о clip, это то, что его можно применить к абсолютно позиционированному элементу (другими словами, к элементу с параметром position: absolute или position: fixed;). Для себя мы так и не выяснили, почему дела обстоят именно так, но склонны думать, что причина к этому всё-таки есть. Это, конечно, значительный недостаток, но мы все равно можем поэкспериментировать с данным параметром.
Следующая часть синтаксиса – это сам параметр clip. Значением может выступать определенная форма, либо «auto». Автоматическое значение не имеет отрезков, это оно является стандартным для элементов. То есть, использовать clip:auto – это все равно, что не использовать clip вообще.
Если вы определите форму (на данный момент доступны только многоугольники), это следует делать посредством функции «rect()», вводя значения, которые определяют форму. Значения могут быть положительными или отрицательными.
Значение rect()
Значения, вводимые в rect(), поначалу могут немного смутить вас, но как только вы познакомитесь с ними, то работать очень легко. В целом, значения представляют собой верх, правую сторону, дно и леву сторону – именно в таком порядке (как и в других CSS-параметрах вроде полей или отступов). Значения определяют сдвиги с верхней части элемента и с левой стороны элемента.
Другими словами, в приведенном выше примере, первое значение размещает воображаемую горизонтальную линию на расстоянии 110 пикселей от верхней стороны (первое значение) и еще одну горизонтальную на расстоянии 170 пикселей от верхней стороны (третье значениие). Второе значение размещает воображаемую вертикальную линию на расстоянии 160 пикселей от левой стороны, и последнее значение размещает еще одну воображаемую вертикальную линию на расстоянии 60 пикселей от левой стороны.
Если это вас путает, то внимательно рассмотрите это изображение:
В этом изображении используются направляющие вроде тех, что мы видим в Photoshop, которые отображают вам, где находятся воображаемые линии, которые вы указали. Светлая область на изображении – это видимая его часть. Остальное будет скрыто. Т.е. отображается только та часть, которая оказалась внутри указанных линий.
Можно рассматривать обрезку файлов как нечто вроде параметра visibility:hidden, примененного только к части элемента.
Так же следует учитывать, что IE6 и IE7 предоставляют поддержку параметра clip, но вместо запятых, разделяемых значения, для этих браузеров следует ставить пробел. Кажется, что и некоторые остальные браузеры воспринимают пробелы в качестве разделителей. Так что, если вам хочется организовать полноценную кросс-браузерную поддержку, то сделайте указание с запятыми и отдельно укажите параметр для IE, а если хотите, чтобы параметр поддерживался большинством популярных браузеров, можете использовать пробелы. Мы не тестировали пробелы во всех браузерах, поэтому это останется вашей задачей.
Забавная анимированная галерея
В W3C параметр clip включен в список параметров с возможностью анимации, так что вместе с примером мы предлагаем вам посмотреть забавную анимированную галерею, чтобы можно было наглядно видеть принцип работы данного параметра. По ссылке ниже вы можете перейти к демо-странице.