Наверняка вы слышали о свойстве css под названием clip. Сегодня мы поговорим немного о его синтаксисе и будем учиться создавать интересный эффект с его помощью.

Синтаксис

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

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

Значение может быть определено в виде  формы или задано автоматически. Значение auto не имеет ограничений и установлено по умолчанию для всех элементов.

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

Значение rect()

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

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

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

Если это вас смущает, может быть, это изображение поможет:

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

Следует также отметить, что IE6 и IE7 поддерживают это свойство, но вместо запятых разделяющих значения, этот браузер требуют пробел.

Создаём анимированную галерею

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

Автор: impressivewebs

Перевод: Дежурка