Введение в CSS Clip

Сегодня мы займемся изучением CSS свойства - Clip.

Я уверен, что некоторые из Вас впервые видят это свойство, так как это одно из самых менее используемых свойств в CSS. Мы расскажем в значительной степени все, что Вы должны знать об этом свойстве.

Свойство CSS clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник. Все остальное остается только в мечтах. clip работает только для абсолютно позиционированных элементов. Есть большое количество подобных JavaScript плагинов, но фактически, вы можете использовать обрезку только на CSS, пример которой вы можете увидеть на сайте seoowl.com.ua. В данном свойстве присутствуют некоторые ограничения которые мы рассмотрим позже.

Синтаксис

Давайте начнем с синтаксиса CSS clip, которое не только немного странное, а еще довольно трудно будет разобрать с первого взгляда. Рассмотрим следующий пример:

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

Первое, что следует отметить: css clip работает только над с элементами position: absolute или position: fixed. Оно не будет работать с относительным или статическим позиционированием.

Честно говоря, я не знаю почему css clip не работает со всеми значениями position. По крайней мере, я ничего не нашел в интернете на эту тему, так что если Вы хотите поделиться некоторыми знаниями, прошу написать в комментарии.

Свойство clip имеет три различных значения:

  • auto: Значение по умолчанию. Установка clip:auto, тоже самое, если вообще не использовать это свойство.
  • inherit: Наследует значение от своего родителя.
  • shape: функция rect();
clip: { shape | auto | inherit } ;

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

Функция rect()

Теперь, разберемся в синтаксисе функции rect(). Функция использует четыре значения длины, разделенные запятыми: сверху, справа, снизу и слева. Это как значения по часовой стрелке в padding или margin.

clip: rect(, , , );

Верхнее и нижнее значения определяют смещение от верхней рамки, а левое и правое значения определяют смещение от левой рамки.

Давайте приведем небольшой пример:

clip: rect(40px, 260px, 150px, 80px);

Это означает, что мы хотим сохранить часть элемента между 40px и 150px по вертикали и от 80px до 260px по горизонтали. Если все еще не понятно, взгляните на следующее изображение:

Данный пример показывает как работает функция rect(), это довольно простая функция, хоть пугает с первого взгляда.

Теперь я задам вопрос чтобы проверить, насколько хорошо вы разобрались в этом свойстве. Скажем, у меня есть элемент шириной 400px и высотой 200px. Теперь я хочу удалить 50px справа от элемента, 10px сверху и 30px снизу. Какую из следующих строк - я должен использовать? (Ответ в конце статьи)

1: clip: rect(50px, 30px, 350px, 70px);
2: clip: rect(0, 10px, 30px, 50px);
3: clip: rect(10px, 50px, 30px, 0);
4: clip: rect(50px, 30px, 10px, 10px);
5: clip: rect(10px, 350px, 170px, 0);

Детали

Хорошо, мы рассмотрели основные методы использования свойства CSS Clip. Еще пара слов о данном свойстве.

Во-первых, rect() принимает auto в качестве значения для каждого из четырех параметров. В основном это означает "100%". Скажем, используете rect(0, 50px, 50px, 0) и хотим отобразить его в полном размере (100 × 100 например). Вы можете написать rect(0, 100px, 100px, 0), либо rect(0, auto, auto, 0).

Во-вторых, функция rect() нуждается в значении длинны для каждого параметра, это означает, что ее можно анимировать при помощи CSS transition и CSS animate. Это отличный способ добавить интересных эффектов вашему сайту. Конечно, вы не можете анимировать значение auto, так как оно не является целым числом.

В-третьих, в функции rect() не поддерживаются процентные значения. Это большой минус, так как элемент не будет адаптивным.

Поддержка в браузерах

Chrome 1.0+
Firefox 1.0+
Internet Explorer 4.0+
Opera 7.0+
Safari 1.0+

Примечание: в Internet Explorer 8, вы должны использовать старый синтаксис, в котором значения функции rect() были разделены пробелами а не запятыми.

.my-element {
    position: absolute;
    clip: rect(10px  350px  170px  0); /* от IE4 до IE7 */
    clip: rect(10px, 350px, 170px, 0); /* IE8+ & остальные браузеры */
}

Примеры

 

 

Ответ на вопрос: строка под номером 5

В следующем уроке мы рассмотрим CSS Clip на практике.

Перевод статьи Understanding the CSS Clip Property

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.